Jump to content

.London Domains - £4
Photo

Please Help me to Make the Top Navbar Fixed

fixed navbar navbar

  • Please log in to reply
5 replies to this topic

#1 henry12

henry12
  • Member
  • Newbie
  • 4 posts

Posted 10 July 2017 - 23:01

Hello coders,

 

Last time I got some very good help here and manage to solve me problem ( thanks to Mr. T).

 

Now I'm working on another project - creating the new design for the site Eva Cleaners.

The job is going pretty well except the top navbar. Since yesterday I'm trying to make the top navbar fixed, but without success. To make it clear - what I'm trying to achieve is when user visit the site and scroll down the page, the top navbar menu ( prices, about us, contact...) to be visible.

 

I tried few suggestions on stackoverflow but nothing worked. Can you help me to solve this? Here is the website for you to check.

 

Regards,

 

Henry


  • 0

#2 Gibson

Gibson
  • Hefty Member
  • Flogging Gibbo
  • 1,764 posts

Posted 11 July 2017 - 00:52

You need to use JS to evaluate when the page has scrolled down the height of the section above the top navbar (add this number in manually if you have specified the height of it in your css) , then when it has, you use JS again to add a class of "fixed" (or whatever) on to the navbar. Then, when the user scrolls up again, you remove the fixed class from the navbar when the gap at the top of the page is equal to or greater than the height of the section above the navbar.

 

You put a JS listener on to the window scrolling event.

 

The fixed class, or whatever you call it (usually "sticky" or "fixed" or similar) will have CSS of position: fixed; in your stylesheet.

 

Sorry I couldn't go in to more detail, I don't have any previous work in front of me to refer to. But there's a couple of pointers.

 

Here's an alright looking link I just googled quickly. If searching for this, refer to it as "sticky" not fixed, and you may get better results.

 

http://www.hongkiat....ticky-position/


  • 0

#3 henry12

henry12
  • Member
  • Newbie
  • 4 posts

Posted 11 July 2017 - 22:48

Hi Gibson and thanks for your help.

 

I'm not very good in JS. Can I do it with pure css/html?


  • 0

#4 Gibson

Gibson
  • Hefty Member
  • Flogging Gibbo
  • 1,764 posts

Posted 12 July 2017 - 00:28

Hi Gibson and thanks for your help.

 

I'm not very good in JS. Can I do it with pure css/html?

 

Well you could if it was in the same place all the time. Problem is in your case you want it only to stick when the rest of the header has disappeared. That's what you need the js for.

 

Unless there's some other method that's coem out that I'm not aware of.


  • 0

#5 DigitalSquid

DigitalSquid
  • Overlord
  • Squidministrator
  • 1,022 posts

Posted 12 July 2017 - 06:11

Well you could if it was in the same place all the time. Problem is in your case you want it only to stick when the rest of the header has disappeared. That's what you need the js for.

 

Unless there's some other method that's coem out that I'm not aware of.

Well, there is a newish CSS property for position called "sticky" that will do it:

https://developer.mo...eb/CSS/position

 

However, it's not supported in current versions of IE or Edge:

http://caniuse.com/#feat=css-sticky


  • 1

More than happy to help for free but if you want to show some love back, either give me an up-vote or buy me a beer!beer.png

www.digitalsquid.net
@Digital_Squid


#6 Gibson

Gibson
  • Hefty Member
  • Flogging Gibbo
  • 1,764 posts

Posted 12 July 2017 - 12:37

Squiddo taking it to another level there, as usual.


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users