Question

我正在尝试使用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>

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

Answer 1

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

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

将此添加到您的代码中。

在JSFiddle

中查看此内容

Answer 2

我认为您在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'});
        }
    }
});

有关示例，请参阅this。

ScrollTo（）方法不起作用

2 个答案: