当 div 位于窗口顶部时使菜单出现 - jquery答案

【问题标题】：Make menu appear when div is at top of window - jquery当 div 位于窗口顶部时使菜单出现 - jquery
【发布时间】：2013-11-04 21:37:27
【问题描述】：

我正在构建一个单页网站，基本上是 4 个大 div。第一个是着陆部分。当用户向下滚动页面 id 时，喜欢从名为 about 的第二个 div 的顶部动画导航菜单。然后，该菜单将固定在窗口顶部。在滚动时找到 div 何时触及窗口顶部的最佳方法是什么？任何有关执行此操作的最佳方法的建议将不胜感激！请参阅基本页面结构的小提琴。

http://jsfiddle.net/aartese/3kRVm/11/

  <body>   
   <div class="row"><!--landing section -->
     <div class="col-md-12 landing">Landing</div>
   </div> <!-- /landing section -->
   <div class="row"><!--about section -->
    <div class="col-md-12 about">About</div>
   </div><!-- /about section -->
   <div class="row"><!-- professional profile section -->
    <div class="col-md-12 professional">Professional</div>
   </div><!-- /professional profile section -->
   <div class="row"> <!-- contact section -->
    <div class="col-md-12 contact">Contact</div>
   </div> <!-- /contact section -->    
  </body>

【问题讨论】：

标签： jquery html css

【解决方案1】：

您使用 $(window).scrollTop() 检查 div offset().top。

$(window).scroll(function(){
    if($(window).scrollTop() >= $('#sample').offset().top){
        $('#sample').addClass('black');
    }else{
        $('#sample').removeClass('black');
    }
})

这是一个演示：Demo

【讨论】：

【解决方案2】：

我认为这对你来说可能是一个很好的解决方案

html:

<div id="menu">top menu </div>

css:

#menu {
width : 800px;
height : 50px;
background-color:blue;
position: fixed;
display : none;
}

脚本：

$(document).scroll(function() {
$('#menu').toggle($(this).scrollTop() > 80);
});

您现在可以在 jquery 中添加动画选项。

【讨论】：

我真的很喜欢这个解决方案！使用带滚动的切换效果很好。谢谢！
实际上，我不确定我是否喜欢使用 scrollTop() 的设置高度，因为如果您更改了窗口大小，它会改变，对吧？我会尝试滴水解决方案。

【解决方案3】：

感谢 streetcoder 让我朝着正确的方向前进。我稍微修改了他的解决方案：

$(document).scroll(function() {
  var divHeight = $('.landingBackground').height();
  $('.navbar').toggle($(this).scrollTop() > divHeight);
});

这将获取第一个主 div(.landingBackground) 的高度。然后，它会在您滚动时根据该高度切换菜单。

【讨论】：

哎呀，我以为我做到了！给你。

【解决方案4】：

我不确定我是否得到了你想要的......

About-Div 是否一直固定？在这种情况下，您需要 css 的 position:fixes-property。

如果您只想在滚动通过第一个 div 后对其进行修复，则必须确定 div 的大小，然后在通过 document.body.scrollTop 到达底部时检查（通过 Javascript）

【讨论】：