Question

所以我在这里有这个html布局

enter image description here

我需要的是红色框中的菜单在页面向下移动时向下移动，但是当我回到原位时我不会超过它现在的位置，它的代码是这有一点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固定位置

.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答案

中

将菜单保持在固定位置

2 个答案: