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 回答