Question

我试图模仿这个http://jsfiddle.net/adamb/F4BmP/ 在＆＃34;结果＆＃34;您可以看到导航栏在滚动时到达页面顶部后如何保留在页面顶部的部分。我使用相同的代码，但我的导航栏并不能保持最佳状态;它继续滚动。我不知道我在这里做错了什么。

这是我的代码：

HTML

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <head>
        <link rel="shortcut icon" href=".\favicon.ico">
        <title>rentPRO</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            var num = 210;

            $(window).bind('scroll', function () {
                if ($(window).scrollTop() > num) {
                        $('#top_menu').addClass('fixed');
                } else {
                        $('#top_menu').removeClass('fixed');
                }   
            });
        </script>   
    </head>

CSS

#header {
    background-image: url("https://lh6.googleusercontent.com/-4epq8pWSUKQ/VNX4lGi_GrI/AAAAAAAAAIo/9gDg5CubDO8/w1044-h201-no/header%2Bfinal1.jpg");
        background-size: 100% 100%;
    width: 1075px;
        height: 200px;
    margin: 0 auto;
    position: relative;
    }

#top_menu {
    display:block;
    position: absolute;
    top: 210px;
    left: 136px;
    border-radius: 4px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: white;
    font-family: 'Lato', sans-serif;
    font-size: 14.85px;
    height: 40px;
    width: 1075px;
    margin: 0 auto;
    border-color: #A4A4A4;
    }
.fixed {
    position: fixed;
    top: 0;
    }

Answer 1

更改＆＃39; top_menu＆＃39;一个班而不是一个ID为我工作。工作jsfiddle。

HTML：div class="top_menu＆＃34;
CSS：.top_menu

JQuery的：

$(document).ready(function(){
    $(window).bind('scroll', function () {
         if ($(window).scrollTop() > num) {
              $('.top_menu').addClass('fixed');
         } else {
              $('.top_menu').removeClass('fixed');
         }   
    });
});

Answer 2

尝试使用文档就绪函数包装Javascript。它应该是这样的：

$(document).ready(function(){

  var num = 210;

  $(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
      $('.top_menu').addClass('fixed');
    } else {
      $('.top_menu').removeClass('fixed');
    }   
  });
});

导航栏在到达页面顶部后保持在顶部

2 个答案: