问题描述:

I have a JavaScript menu bar that is positioned on my webpage, then when the browser bar reaches the top of the menu it locks into a fixed position and moves with the window. However, i need to contain the menu within a div, how can this be done?

This is my menu bar:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type='text/javascript'>

$(window).load(function(){

$(window).scroll(function(){

if ($(window).scrollTop() >= 200)

{

$("#floatbar").css({position:'fixed',left:'0',top:'0'});

}

else

{

$("#floatbar").css({position:'absolute',left:'0',top:'200px'});

}

});

});

</script>

and this is my html:

<div id="menu_runner">

<div id="floatbar">

<a href="#issue49">Issue 49</a><br />

<a href="#issue48">Issue 48</a><br />

<a href="#issue47">Issue 47</a><br />

<a href="#issue46">Issue 46</a><br />

</div>

</div>

and my css:

#menu_runner {

width: 100px;

height: 2000px;

float: right;

position: relative;

}

#floatbar {

width: 70px;

position: absolute;

top: 200px;

}

where the menu runner is the containing div of the menu, and the floatbar obviously contains the menu which runs the JavaScript.

However when I try this code, the menu sticks to the left and 200px from the top, and not within the menu_runner div. How can i make the floatbar be positioned in the menu_runner div and then scroll down with the JavaScript within the div as it should.

网友答案:

if ($(window).scrollTop() >= 0) <------set it to zero or you could use css

#floatbar {
     position:fixed;
     top: 10px;  /* tells browser the div should position at the very bottom of the window */
     right: 1px;  /* tells the browser the div should have no space on the right */
     left: 1px;  /* tells the browser the div should have no space on the left */
     margin: 1px; /* because we want this width: 100%, the margin must be 0 */
     padding: 1px; /* because we want the width: 100%, the padding must be 0 */
     width: 10px; /* makes the div a bar stretching across the bottom of the screen */
     height: 35px; /* makes the floating bar 35 pixels high*/
     z-index: 9999; /*positions this div on top of all other elements in the site - this number can increase or decrease to your liking */
     border:1px solid #000;
}
相关阅读:
Top