将菜单保持在固定位置

Question

所以我这里有这个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做到这一点？ 还是有更简单的方法？

我不希望它固定在某个位置，它不会做我想做的，我希望它在某些地方保持固定，但是当我在页面顶部时，我不希望它回到原来的位置

Answer 1

使用CSS固定的positoin

.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");
}

})

Answer 2

您可以通过将侧边栏固定在固定位置来完成此操作

#sidebar{
   position:fixed;

}

js方法在@johnraymos答案中