0

だから私はここにこのhtmlレイアウトを持っています

ここに画像の説明を入力

私が必要とするのは、ページが下に移動するにつれて赤いボックスにあるメニューが下に移動することですが、上に戻ると、現在の位置を通り過ぎることはありません。そのためのコードはこれですCSSのビット

        <div id="sidebar">
            <div class="sidebarbox">
               <h2>Menu</h2>
                <ul class="sidemenu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about me.html">About me</a></li>
                    <li><a href="about.html">---------</a></li>
                    <li><a href="development.html">Development</a></li>
                    <li><a href="future development.html">Future Development</a></li>
                    <li><a href="video.html">Video Explaination</a></li>
                    <li><a href="java.html">Java Files</a></li>
                    <li><a class="bold" href="downloads.html">Downloads</a>
                        <ul>
                            <li><a href="#source">Source Code</a></li>
                            <li><a href="#text">Text Files</a></li>
                            <li><a href="#pdfs">PDFs</a></li>
                            <li><a href="#images">Images</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

CSS:

#sidebar{background:transparent url('images/sidebar-top.jpg') no-repeat scroll top left;float:right;width:25%;}
#sidebar .sidebarbox {margin:0 0 25px 0;background-color:#fff; border:1px solid #467aa7;}
#sidebar p{margin:10px 0 10px 10px;}
#sidebar ul{list-style:none;margin:10px 0 10px 10px;padding:0;}
#sidebar ul li{margin:0 0 5px 0;}
#sidebar ul li a{color:#467aa7;font-weight:400;}
#sidebar ul.sidemenu {margin:0;}
#sidebar ul.sidemenu li{display:inline;padding:0;margin:0;}
#sidebar ul.sidemenu li a{display:block;padding:7px 5px 6px 10px;font-size:1.2em; font-weight:400;text-decoration:none;border-bottom:1px solid #ddd;}
#sidebar ul.sidemenu li a:hover{background-color:#eee;color:#333;border-bottom:1px solid #ccc;}
#sidebar ul.sidemenu li .bold{font-weight:bold;}
#sidebar ul.sidemenu ul{margin:0;padding:0;font-size:0.9em;border-bottom:1px solid #ccc;}
#sidebar ul.sidemenu ul li a{padding:5px 5px 5px 25px;border:0;font-weight:400;}
#sidebar ul.sidemenu ul li a:hover{border:0;}
#sidebar ul li a:hover{color:#333;}
#sidebar h2{background-color:#467aa7;color:#fff;font-size:1.5em;margin:0 0 0 0;padding:10px;}
#sidebar h3{font-size:1.4em; padding:10px 10px 0 10px;}

これをjsまたはjqueryで行いますか？それとももっと簡単な方法がありますか？

私はそれを固定位置にしたくありませんが、それは私が望むことをしません。いくつかの部分で固定したままにしたいのですが、ページの上部にいるときではなく、元の位置に戻したいです

4

2 に答える 2

5

CSS 固定位置を使用する

.sidemenu{
position:fixed;
}

したがって、ページの上部にいるときに元の位置を再度取得したい場合は、

このコードを JavaScript ファイルに追加します

$("document").ready(function(){
 For IE:

   var X - window.screenLeft
   var Y - window.screenTop

    For everything else:

    var X - window.screenX
    var Y - window.screenY
//use something like this
if(Y==0 && X==0){
$(".submenu").css("position","absolute");
}else if( Y>0){
$(".submenu").css("position","fixed");
}

})
于 2012-09-30T07:31:26.113 に答える
0

サイドバーを固定位置にすることでこれを行うことができます

#sidebar{
   position:fixed;

}

jsのアプローチは@johnraymosの回答にあります

于 2012-09-30T07:39:45.937 に答える