Fixed bar on top, revealed only when the scroll attempts to conceal it

Question

Fixed bar on top, revealed only when the scroll attempts to conceal it

I have placed a menu on the top section of my website, but not at the very top. I would like it to stick to the top of the page when the user scrolls down and disappears from view. However, if the title is still visible, I want the menu to remain below it in a seemingly fixed position.

Is it possible to achieve this effect using only CSS without JavaScript? I remember seeing it on a website before, but I can't recall where exactly.

Thank you in advance (and please excuse my imperfect English!) ;)

javascript css

Answer 1

Answer №1

Here is the solution you've been searching for: https://jsfiddle.net/QuVkV/2/

This is the HTML structure:

<div id='wrapper'>
    <div id='upper'>This is upper content</div>
    <div id='position-saver'>
        <div id='bar'>This is the menu bar</div>
    </div>
    <div id='lower'>This is some content lower than the menu bar</div>
</div>

Below is the CSS:

#wrapper {
    width: 100%;
    height: 2000px;
}

#upper {
    width: 100%;
    height: 100px;
}

#position-saver {
    height: 50px;
    width: 100%;
}

#bar {    
    position: static;
    height : 50px;
    width: 100%;
}

And here's the JavaScript:

$(document).on('scroll', function(){
    if ($('#bar')[0].offsetTop < $(document).scrollTop()){
        $("#bar").css({position: "fixed", top:0});            
    }
    if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
        $("#bar").css({position: "static", top: 0});           
    }            
});

Answer 2

Here is the solution you've been searching for: https://jsfiddle.net/QuVkV/2/

This is the HTML structure:

<div id='wrapper'>
    <div id='upper'>This is upper content</div>
    <div id='position-saver'>
        <div id='bar'>This is the menu bar</div>
    </div>
    <div id='lower'>This is some content lower than the menu bar</div>
</div>

Below is the CSS:

#wrapper {
    width: 100%;
    height: 2000px;
}

#upper {
    width: 100%;
    height: 100px;
}

#position-saver {
    height: 50px;
    width: 100%;
}

#bar {    
    position: static;
    height : 50px;
    width: 100%;
}

And here's the JavaScript:

$(document).on('scroll', function(){
    if ($('#bar')[0].offsetTop < $(document).scrollTop()){
        $("#bar").css({position: "fixed", top:0});            
    }
    if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
        $("#bar").css({position: "static", top: 0});           
    }            
});

Answer 3

Answer №2

I've come across this type of design on various websites, including 9gag.com.

One way to achieve this is by utilizing the position property in css.

You can check out an example here: JSFiddle

#scroll-me{ 
    width:100%;
     height:100px; 
     background:#333;
     position: fixed;
     top:15px;
     }

By setting position:fixed and top:15px for the scroll-me div, it will always stay 15px from the top.

Answer 4

I've come across this type of design on various websites, including 9gag.com.

One way to achieve this is by utilizing the position property in css.

You can check out an example here: JSFiddle

#scroll-me{ 
    width:100%;
     height:100px; 
     background:#333;
     position: fixed;
     top:15px;
     }

By setting position:fixed and top:15px for the scroll-me div, it will always stay 15px from the top.

Fixed bar on top, revealed only when the scroll attempts to conceal it

Answer №1

Answer №2

Similar questions

Upon concatenation, the screen automatically returns to the beginning of the page

What is the method for retrieving this data using Javascript?

Struggling with jquery's addClass method when trying to apply a class to

Issues encountered with Nextjs 13.4 and Next-Auth 4.2 regarding the signIn("credentials", { }); functionality not functioning as expected

Checkbox remains selected even after navigating back

What would be the best approach to convert this jQuery code into a more structured object-oriented programming format

Strange Behavior When Floating Right in Chrome

Steps for deactivating AMD on four files and sequentially loading them using webpack

Is there a way to extract video frames from a WebRTC local stream and transfer them to Python?

Adjusting Bootstrap buttons to have a margin-left of -1px when clicked outside the designated area

The rules for prioritizing CSS selectors

How do I retrieve the content within this HTML element using JavaScript based on its ID?

Firebase 9 - Creating a New Document Reference

Speedy Guide to Referencing Variables in JavaScript

Yeoman webapp error: Issue with incorrect CSS path in subfolder

The robots.txt file in Nuxt.js allows for multiple disallow directives for each user agent

Error in IONIC 3: The code is unable to read the 'nativeElement' property due to an undefined value, resulting in a TypeError

The issue persists with Angular's overflow hidden not functioning properly, and similarly, the show password button is

Issue: The module could not be located within the project or in any of the directories, including node_modules

Angular Digest Loop for Dynamic Photo Grid Styling