0

我正在尝试使用 scrollTo() 使 div 在滚动时触及顶部后变得固定。这是我添加的带有脚本的完整 html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <style>
            .topnav{
                width:100%; 
                background-color:#444; 
                color:#eee; 
                padding:10px; 
                position:relative;
            }
        </style>
        <script>
            $(window).scroll(function(){

                if($('body').scrollTo('.topnav', {offsetTop : '0'})){

                    $(this).css('position','fixed');
                    $(this).css('top','0');

                } else {

                    $(this).css('position','relative');
                }
            });
        </script>
    <head>
    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>sdsf
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>

        <div class="topnav">topnav</div>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dfgv<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    </body>
</html>

但它根本不起作用。我的逻辑是说如果 div 在 0 位置滚动到顶部，它的位置应该从相对变为固定，以便之后它固定在顶部。请告诉我做错了什么。

4

2 回答 2

0

我认为您在 和 之间感到scrollTop()困惑scrollTo()。
scrollTop()：方法设置或返回所选元素的垂直滚动条位置。
scrollTo() ：方法将内容滚动到指定的坐标。

看到它在这里工作，http://jsfiddle.net/cryostat/UhmNb/。

要在触及顶部时固定 div，请使用以下命令：

var fixed = false;

$(document).scroll(function() {
    if( $(this).scrollTop() >= 100 ) {
        if( !fixed ) {
            fixed = true;
            $('#nav').css({position:'fixed',top:0});
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('#nav').css({position:'static'});
        }
    }
});

一个很好的例子见这个。

于 2013-08-16T08:04:36.200 回答
0

经过一番调查，很明显您缺少添加scrollTo()插件。

<script type='text/javascript' src='http://flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js' />

将此添加到您的代码中。

在JSFiddle中检查这个

于 2013-08-16T07:25:58.673 回答