SlideDown/SlideUp BS Menu

JavaScript
,
1

I’m trying to create a SlideDown/SlideUp type menu based on certain conditions. Hopefully, someone can help me figure it out even if it is just part of it.

Code: https://codepen.io/gza/pen/BrJOmx

1. NAVBAR not fixed - completely transparent so that .full-background background/image is visible.

  • Having an issue with transparency when navbar-fixed-top isn’t appended. Not sure if it’s because of bootstrap. I’ve commented out navbar-fixed-top so you can see.

SlideUp/SlideDown Conditions
2. When a link is clicked to each link section – NAVBAR ‘SlidesDown’
3. When a user scrolls down – NAVBAR ‘SlidesUp’ (To hide it so all content is visable)
4. When a user stops scrolling – NAVBAR ‘SlidesDown’ (If they want to click another link)

2

So fix it to the top. That seems to be the desired behavior. Bind a scroll event to set it appearance to none, and variable a timeout to make it appear again. As long as the user continues to scroll, the function is called repeatedly and keeps the bar hidden, and then when they stop the timeout completes and the bar is revealed.

3

I understand what you mean but I’m not very good with jquery. Are you able to fork it and show an example?

Thanks

4

Nothing i’ve suggested involved jQuery.

5

I actually found that yesterday. Added the ID from scrollFunction to the nav but it didn’t work.

6

the id is meaningless. The concept of attaching an event handler to the window’s scroll event was the point of the page.

7

Can you show an example of it on the bootstrap template

8

The example shown in the link above is in pure javascript, and works in any template. AFAIK, Bootstrap does not give an alternate means of binding an event. jQuery offers a few shorthand methods like .on() and .scroll() (which is itself a shorthand for .on(‘scroll’)

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.