1

我已经有一段时间了，我只是卡住了。我正在使用 Win XP、IE8 和 JQuery 1.4.4。

我想要的是导航菜单从标题下开始。但是一旦标题不在视图中，导航菜单将停留在滚动窗口的顶部。当用户向上滚动并且标题重新出现时，导航菜单应该再次停留在标题下方。

现在，它是浮动的，但没有调整我想要的方式。

这是我尝试过的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Please make this scrolling work</title>
    <link href="Styles/Navigation.css" rel="Stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.4.min.js" language="javascript" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(window).scroll(function () {
                //var bottom = $('#contents').height() + 100;
                var bottom = $(window).height();
                var top = $('#header').height();
                var top_start = top + 1;
                var top_limit;
                if (document.body.scrollTop <= top_start) {
                    top_limit = top_start;
                }
                else {
                    top_limit = 0;
                }
                $('#menu-bar').css('top', (top_limit) + "px");
                //$('#menu-bar').css('bottom', (bottom) + "px");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="header" style="clear:both;height:40%;">
        stuff
        <br />
        <br />
        more stuff
        <br />
    </div>
    <div class="menu-bar" style="float:left;width:25%;" id="menu-bar">
            <ul>
                <li><a href="#mainpage">Main Page</a>
                    <ul>
                        <li><a href="#search">Search</a></li>
                        <li><a href="#foo">Foo</a></li>
                        <li><a href="#bar">Bar</a></li>
                        <li><a href="#baz">Baz</a></li>
                        <li><a href="#blah">Blah</a></li>
                    </ul>
                </li>
            </ul>
    </div>
    <div id="contents" style="float:left;margin-left:25%;">
        olwqfjapnwvqjpfqjwfeoqjfepqfewjqpfjnqpefpkqjmewpofqne
        <br />
        powjunvejpqlewkjrvqpnewkjmqwofvjnewpfoqewkjponqejpewfmqewp
        <br />
    </div>

以及菜单的 CSS：

.menu-bar{  
    position: fixed;
    overflow:scroll;
    height:100%;
    /*top:0;
    bottom:0;*/
}

编辑： 这是修复。 

    <script language="javascript" type="text/javascript">
        $(window).scroll(function () {
            //var bottom = $('#contents').height() + 100;
            var bottom = $(window).height();
            var top = $('#header').height();
            var top_start = top + 1;
            var top_limit;
            if ($(window).scrollTop() <= top_start) {
                top_limit = top_start;
            }
            else {
                top_limit = 0;
            }
            $('#menu-bar').css('top', (top_limit) + "px");
            $('#menu-bar').css('bottom', (bottom) + "px");
        });
    </script>
    </div>
    </form>

</body>
</html>

虽然我不太明白为什么：

top_limit = 0; //works but...
top_limit = $(window).scrollTop(); //doesn't work.
4

1 回答 1

2

我认为您需要计算用户屏幕上方有多少空间。你必须用

这个

$(document).height() // this will give you the size of the whole document

这个

window.innerHeight // this will give you the size of the screen

和这个

window.pageYOffset // this will give you how much you had scrolled vertically

很长一段时间以来，为了制作您需要的类似效果，我需要一个功能，如果标题不在视线范围内，我需要菜单保持在顶部，标题为 200px

function scrollControl(){
    if(($(document).height() - (window.innerHeight + window.pageYOffset))<=500){
        //what to do if the space below is 500px or less, for the footer
    }else if(window.pageYOffset>=200){
        //what to do if the space above is 200px or more, for the header
    }else{
        //what to do if the element was in the rest of the space
    }
}

这是旧代码，如果您认为有错误，请多多关照，希望对您有所帮助。

于 2012-06-14T16:20:35.630 回答