Javascript 当菜单位于视口外部时触发事件，并将菜单固定到视口顶部_Javascript_Jquery_Html_Css

Javascript 当菜单位于视口外部时触发事件，并将菜单固定到视口顶部

javascript jquery html css

Javascript 当菜单位于视口外部时触发事件，并将菜单固定到视口顶部,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个菜单元素，如果菜单元素由于滚动而在视口外，我希望该元素固定在浏览器视口的顶部。从概念上讲，我的网页看起来像下面的示例HTML，其中菜单位于标题中某个文本的下方。一旦用户滚动过标题，菜单应固定在浏览器视口的顶部，以便菜单始终可见。同样，如果用户向上滚动以使标题在浏览器视口中再次可见，则菜单应返回非固定位置更新：设计要求是，菜单应位于标题下方，因为它包含一些必须在菜单之前阅读的重要消息，只有当您滚动过标题时，菜单才应固定在浏览器视口的顶部我猜我需要JQuery来完成这项工作？有人能举一

我有一个

菜单

元素，如果

菜单

元素由于滚动而在视口外，我希望该元素固定在浏览器视口的顶部。从概念上讲，我的网页看起来像下面的示例HTML，其中菜单位于标题中某个文本的下方。一旦用户滚动过标题，菜单应固定在浏览器视口的顶部，以便菜单始终可见。同样，如果用户向上滚动以使标题在浏览器视口中再次可见，则菜单应返回非固定位置

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

我猜我需要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>

JS:

可以包括

css

，

js

在问题中尝试过吗？@guest271314还没有尝试过任何东西，因为我还没有找到解决方案。我面临的不是一个bug，而是如何从概念上解决手头的问题。谢谢

.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%;}

$('.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');
  }
}