Question

我一直想知道如何在滚动时让div元素保持在页面顶部，就像我在某些网站上看到的那样。我见过很多解决方案，但它们对我不起作用，我不知道为什么。

所以我一直在寻找如何做这件事很长一段时间，而我最接近的是this，但似乎出了点问题。我的js是这样的：

var navTop = $('.nav').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= navTop) {
        $('.nav').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.nav').css({
            position: 'static'
        });
    }
});

我的HTML是：

<!DOCTYPE html>
<html>

<head>
<script src="scrll.js"></script>
<style>
a:link {
color:#000000; background-color:transparent
}
a:visited {
color:#000000; background-color:transparent
}
a:hover {
color:#000000; background-color:transparent
}
a:active {
color:#000000; background-color:transparent
}
body {
    height: 3000px;
}
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
    box-shadow: 0px 10px 5px #888888;
    border-radius: 25px;
}
.fixme {
    line-height:30px;
    background-color:#eeeeee;
    height:30px;
    width:100%;
    float:left;
    padding:5px;    
    border-radius: 25px;
}
#section {
    width:350px;
    float:left;
    padding:10px;        
}
</style>
</head>

<body>

<div id="header">
<h1 style="font-size: 400%">Website</h1>
</div>

<div class="nav">
<a href="home.html" style="text-decoration:none"> Home |</a>
<a href="download.html" style="text-decoration:none"> Activity |</a>
<a href="https://www.google.com/" style="text-decoration:none" target="_blank"> Google |</a>
<a href="suggestions.html" style="text-decoration:none"> Suggestions |</a>
</div>

<div id="section">
<h2>Suggestions</h2>
<p>
Herpdaderp
</p>
</div>

</body>
</html>

它适用于JSFiddle，但它似乎无法在我的计算机上外部工作。我甚至尝试直接粘贴代码并将其转换为自己的html文档，但即便如此。

我相信它与使用javascript的html有关，但我可能错了。有没有人对此有所帮助？

Answer 1

将CSS中的 .fixme 更改为 .nav 。

在关闭正文标记：

之前添加此内容

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript"> 
        $(function(){
            //Gives you the distance from top of document to the element
            //no what you can see, think of it as if you print the page
            //and then measure the distance from the top to the nav...
            var navOffsetTop = $('.nav').offset().top;
            //Add a listener for the scroll movement
            $(window).scroll(function() {
                //Gives you how much pixels has moved the scrollbar
                var currentScroll = $(window).scrollTop();
                //If the distance puts you in the nav position
                if (currentScroll >= navOffsetTop) {
                    //Change the nav to be fixed in the page
                    $('.nav').css({
                        position: 'fixed',
                        top: '0',
                        left: '0'
                    });
                } else {
                    //Returns the nav to no-fixed position
                    $('.nav').css({
                        position: 'static'
                    });
                }
            });     
        }); 
    </script>

请参阅：

<html>
    <head>        
      <style type="text/css">
        a:link {
        color:#000000; background-color:transparent
        }
        a:visited {
        color:#000000; background-color:transparent
        }
        a:hover {
        color:#000000; background-color:transparent
        }
        a:active {
        color:#000000; background-color:transparent
        }
        #header {
            background-color:black;
            color:white;
            text-align:center;
            padding:5px;
            box-shadow: 0px 10px 5px #888888;
            border-radius: 25px;
        }
        .nav {
            line-height:30px;
            background-color:#eeeeee;
            height:30px;
            width:100%;
            float:left;
            padding:5px;    
            border-radius: 25px;
        }
        #section {
            width:350px;
            float:left;
            padding:10px;        
        }
        body {
            height: 3000px;
        }
      </style>
    </head>
    <body>
      <div id="header">
        <h1 style="font-size: 400%">Website</h1>
      </div>

        <div class="nav">
            <a href="home.html" style="text-decoration:none"> Home |</a>
            <a href="download.html" style="text-decoration:none"> Activity |</a>
            <a href="https://www.google.com/" style="text-decoration:none" target="_blank"> Google |</a>
            <a href="suggestions.html" style="text-decoration:none"> Suggestions |</a>
        </div>

        <div id="section">
            <h2>Suggestions</h2>
            <p>
                Herpdaderp
            </p>
        </div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script type="text/javascript"> 
            $(function(){
                var navOffsetTop = $('.nav').offset().top;

                $(window).scroll(function() {
                    var currentScroll = $(window).scrollTop();
                    if (currentScroll >= navOffsetTop) {
                        $('.nav').css({
                            position: 'fixed',
                            top: '0',
                            left: '0'
                        });
                    } else {
                        $('.nav').css({
                            position: 'static'
                        });
                    }
                });     
            }); 
        </script>       
    </body>
</html>

在我的情况下，只将效果放在nav元素中：

http://jsfiddle.net/abrhmcc/vc6bhL1o/2/

但如果您不想使用jQuery，并且始终将标题和导航放在顶部，只需在标题和导航的css中设置：

position: fixed;
top: 0;
z-index:2;

只需改变从顶部到方便的距离。

并为您的部分设置保证金：

margin-top: 200px;

http://jsfiddle.net/abrhmcc/vc6bhL1o/4/

html - 滚动时如何使div元素保持在顶部？

1 个答案: