CODEWITHSUNDEEP
jqueryhtmlcssmenu
FabianCook
FabianCook

Reputation: 20557

Keep menu in a fixed position

So I have this html layout here

enter image description here

What I need is for that menu that is in the red box to move down as the page moves down, but when I go back up I don't it to go past the position it is now, the code for it is this with a bit of 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;}

Would you do this with js or jquery? Or is there an easier way?

I dont want it a fixed position though, it wont do what I want, I want it to stay fixed at some parts, but not when I am at the top of the page, I want it to go back to its original position

Upvotes: 0

Views: 1251

Answers (2)

Database_Query
Database_Query

Reputation: 634

you can do this by making the sidebar fixed position 

#sidebar{
   position:fixed;

}

and the js approach is in the @johnraymos answer

Upvotes: 0

StaticVariable
StaticVariable

Reputation: 5283

use a css fixed positoin

.sidemenu{
position:fixed;
}

So if you want to get the orignal position again when you are on the top of the page than

add this code to javascript file

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

})

Upvotes: 5

Related Questions