gpt4 book ai didi

javascript - 当菜单在视口(viewport)外时触发事件并将菜单固定到视口(viewport)顶部

转载 作者:行者123 更新时间:2023-11-28 06:31:06 25 4
gpt4 key购买 nike

我有一个 menu 元素,如果 menu 元素变得视口(viewport)之外,我想固定到浏览器视口(viewport)的顶部由于滚动。从概念上讲,我的网页看起来类似于下面的示例 HTML,其中菜单位于标题中的一些文本下方。一旦用户滚动过标题,菜单应该固定在浏览器视口(viewport)的顶部,以便菜单始终可见。同样,如果用户向上滚动菜单应该返回到非固定位置,以便标题再次在浏览器视口(viewport)中可见。

更新:设计要求菜单应位于标题下方,因为它包含一些必须在菜单之前阅读的重要消息,只有当您滚动经过标题时,菜单才应固定在浏览器视口(viewport)的顶部。

我猜我需要 JQuery 才能完成这项工作?请有人可以张贴一些例子。

<html>
<body>
<header id="header">Header text...
<menu id="menu"><a href="/">Home</a> | <a href="/Help">Help</a></menu>
</header>
<section id="more">More text...</section>
</body>
</html>

最佳答案

这只是一个如何通过 jQuery 完成的示例。只需在标题下方添加 4 、 5 个带有文本的段落即可查看其工作原理。下面是通过 codepen 的示例。

HTML:

  <header>
<div class="logo">STICKY MENU ON SCROLL!</div>
<div class="intro">Some dumbass tagline goes here</div>
<div class="menu">Menu goes here - home - links - blah blah</div>
</header>

CSS:

.logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.intro {color:#777; font-style:italic; margin:10px 0;}
.menu {background:#00a; color:#fff; height:40px; line-height:40px;letter-spacing:1px; width:100%;}

JS:

$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;

if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.

// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}

HERE IS THE DEMO

关于javascript - 当菜单在视口(viewport)外时触发事件并将菜单固定到视口(viewport)顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34965423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com