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 に答える