0

I have done some research and quite confused as some say javascript would be the solution.

However, I have a menu within the main container and is the in the middle of the webpage.

What I want to be able to do is that I want the menu to only scroll down with the browser once coming in contact with the browser's top. e.g. when the page loads, I want the menu to stay where it is (i.e in the middle of the website) and when the user scrolls down, the menu still stays where it is but when the menu comes in contact to the top of browser, it follows the scroll, making it visible to the user till the very bottom of the webpage.

At the moment, when I give it a position: fixed; , it sticks all the way top of the browser.

Any idea how I can do this with CSS and HTML or even javascript? much appreciated.

This is what I am using:

**HTML:**

<div id="main-container">
 <div id="headbody"></div>
 <div id="menu-midddle"></div> --// this is the menu in the middle of the page \\--
</div>

**CSS:**  

#main-container {
width: 1000px;
height: 2200px;
background-color: #FFFFFF;
margin: 0px auto;
top: 0px;
position:relative;
border-style:solid;
border-width:1px;
border-color:#dfe3ee;
}
#headbody {
width:1000px;
height:45px;
border-style:solid;
border-width:1px;
border-color:#588039;
background-color: #588039;
margin: 0px auto;
position: fixed;
z-index: 2;
top:0;
} 
#menu-middle {
width:1000px;
height:45px;
border-style:solid;
border-width:1px;
border-color:#588039;
background-color: #588039;
margin: 0px auto;
position: fixed;
z-index: 2;
top:0;
} 

#main-container {
width: 1000px;
height: 2200px;
background-color: #FFFFFF;
margin: 0px auto;
top: 0px;
position:relative;
border-style:solid;
border-width:1px;
border-color:#dfe3ee;
}

jsfiddle

Imperative
  • 3,138
  • 2
  • 25
  • 40
user3682764
  • 3
  • 1
  • 5

1 Answers1

0

You might want to look at bootstrap affix.js

http://getbootstrap.com/javascript/#affix

You can see the behavior on the menu of http://getbootstrap.com

Here is a tutorial for affix.js from bootstrap:

http://tutsme-webdesign.info/bootstrap-3-affix

mahatmanich
  • 10,791
  • 5
  • 63
  • 82
  • Does this work without bootstrap? I had created a custom jQuery plugin for this.. But now I have to consider this one :) thanks @mahatmanich – Anil Maharjan May 28 '14 at 11:24
  • I have not tested it but I think you can use it without bootstrap, get it here: https://github.com/twbs/bootstrap/blob/master/js/affix.js @AnilMaharjan – mahatmanich May 28 '14 at 11:30
  • @AnilMaharjan tutorial for that would be here -> http://tutsme-webdesign.info/bootstrap-3-affix/ – mahatmanich May 28 '14 at 11:35
  • @mahatmanich Thanks but the menu of the example is not really what I am looking for :( my menu is in the middle of the page and I want it to get and stay fixed to browser top when its about to disappear as user scrolls down – user3682764 May 28 '14 at 14:39
  • then you need to affix top + the menu height! I assume you want it to scroll out of sight and on scroll top it comes back in ... – mahatmanich May 28 '14 at 14:59
  • The thing is the menu is inside the main-container which is the div of the whole web page. Hence I want it to stay where it is unless it hits the top of browser, that's when I want it to become position:fixed and get back to position:relative when user scrolls back up – user3682764 May 28 '14 at 15:09
  • that is what affix does. When you set something as fixed, you break it out of the container with position: fixed. The element is not in the natural flow anymore within but is set fixed to top and you can add a left or right. It will stay fixed until you tell it to move back into the container being relative and in natural flow. This can only be done with javascript, and an easy way to do so is with the affix.js jquery plugin. Read the pages I posted above and you will understand! – mahatmanich May 28 '14 at 18:58