Question

我正在建立一个单页网站，基本上是4个大型div。第一个是着陆区。当用户向下滚动页面ID时，就像从第二个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>

Answer 1

使用$（window）.scrollTop（）检查div offset（）。top。

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

以下是演示：Demo

Answer 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中添加动画选项。

Answer 3

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

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

这将获得第一个主div（.landingBackground）的高度。然后，当您滚动时，它会根据该高度切换菜单。

Answer 4

我不确定我得到你想要的东西.......

About-Div是否一直都在修复？在这种情况下，你会想要你的位置：css的fixes-property。

如果你只想在滚动后通过你的第一个div来修复它你必须确定divs大小然后chekc（通过Javascript）如果你通过document.body.scrollTop

到达底部

div位于窗口顶部时显示菜单 - jquery

4 个答案: