Question

181

Fix menu bar at top of page once header has been scrolled past

rated 0 times [ 187] [ 6] / answers: 1 / hits: 31465 / 12 Years ago, thu, january 24, 2013, 12:00:00

Firstly I apologise if this is too open-ended a question.

I am aware of making the header of a web page static so it is always visible at the top of the viewport and the content passes beneath it as you scroll down. This can be achieved purely with css.

I was wondering how you would achieve letting the header scroll off the page but leave a horizontal menu bar static at the top. http://www.forexfactory.com is a perfect example of this.

I see it calls a JavaScript function onHeaderComplete.execute() which I assume applies extra css style to the nav bar when the header scrolls off but I'm unsure of how it works. Any basic explanation appreciated as my JavaScript skills are relatively limited.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayaw

Add To Favorites

Follow

Total Points: 749

Total Questions: 88

Total Answers: 86

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

tayaw questions

1 How to enable cache for getServerSideProps?

Thu, Mar 3, 22, 00:00, 2 Years ago

1 navigator.clipboard.readText() is not working in Firefox

Fri, May 7, 21, 00:00, 3 Years ago

1 Vuetify form .$refs validate is not a function

Wed, Oct 7, 20, 00:00, 4 Years ago

1 Using absolute position to place image above another image using Tailwind CSS

Sun, Sep 6, 20, 00:00, 4 Years ago

1 How to make div tag clickable with Link from react-router-dom?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 12 Years ago dominickmackenziet · Accepted Answer

I just answered similar question. CHECK THIS QUESTION

$(function(){

        // Check the initial Poistion of the Sticky Header

        var stickyHeaderTop = $('#stickyheader').offset().top;



        $(window).scroll(function(){

                if( $(window).scrollTop() > stickyHeaderTop ) {

                        $('#stickyheader').css({position: 'fixed', top: '0px'});

                        $('#stickyalias').css('display', 'block');

                } else {

                        $('#stickyheader').css({position: 'static', top: '0px'});

                        $('#stickyalias').css('display', 'none');

                }

        });

  });

DEMO