Question

我已经有一段时间了，我只是陷入困境。我正在使用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.

Answer 1

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

来计算

这个

$(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
    }
}

这是一个旧代码如果您认为有错误请善待，我希望这可以帮助您。

如何使用浮动垂直导航菜单并调整其位置？

1 个答案: