What is the best way to create a responsive sticky toolbar that stays in place without any strange scrolling issues, even when the page is just a

I am trying to implement a code that moves a toolbar positioned below a header to stick to the top of the viewport while scrolling down. However, I am encountering an issue where if the content height exceeds the viewport height slightly and you try to scroll to the bottom, it bounces back up just above the end of the content with a strange visual glitch. This may be due to the 'sticky' class increasing the page's height when applied, but I'm unsure how to fix it.

Javascript/JQuery:

var enableSticky = () => {
    let headerHeight = $('.toolbar').offset().top;

    $(window).scroll(() => {
        if ($(window).scrollTop() > headerHeight) {
            $('.toolbar').addClass('sticky');
        } else {
            $('.toolbar').removeClass('sticky');
        }
    });
};

CSS:

.toolbar {
    width: 100%;
    height: 84px;
    position: relative;
}

.toolbar.sticky {
    background-color: rgba(255,255,255,0.9);;
    position: fixed;
    top: 0;
    z-index: 5;
    margin-bottom: -84px;
}

HTML:

<div id="bcmMain" style="display: block;">
<h1 id="event-title"><span class="view-table-value" data-field-name="mopId">927</span> - <span class="view-table-value" data-field-name="subject">Sample Subject</span></h1>
    <div class="toolbar">
        <div class="status-toolbar-group toolbar-group">
            <a class="button" id="level-button">Level <span class="view-table-value" data-field-name="level">3</span></a>
        </div>
        <div class="toolbar-group">
            <a class="button" id="status-button">Status: <span class="view-table-value" data-field-name="status">complete</span></a>
            <a class="button" id="pending-button">Mark Pending</a>
        </div>
        <div class="edit-toolbar-group toolbar-group">
            <a class="button" id="submit-changes-button">Submit Changes</a>
            <a class="button" id="cancel-changes-button">Cancel Changes</a>
        </div>
        <div class="toolbar-group">
            <a class="button" id="edit-button">Edit</a>
            <a class="button" id="clone-button">Clone</a>
        </div>
    </div>  
    <div id="edit-details">
        <!-- CONTENT HERE -->
    </div>
</div>

I have attempted using 

if ($(window).scrollTop() > headerHeight + 100)
to delay adding the sticky class until further scroll before reaching the glitch point, but this only shifts the height at which the glitch occurs.

Any suggestions on improving the code to eliminate this glitch?

EDIT: Added HTML for reference. Let me know if more details are required. Thanks!

NOTE 1: The code is embedded in a Confluence page where the Confluence page header is hidden, but not the website header or sidebar. Refer to the images linked below demonstrating a non-sticky and sticky view at varying scroll positions.

Image of Not Sticky

Image of Sticky

NOTE 2: Data displayed on the page is fetched from a database via API for populating fields.

javascriptjqueryhtmlcss

Answer №1

It's a bit unclear what you're referring to, but I believe you're talking about the 'bounce' effect caused by removing the toolbar from the page flow.
The content always bounces the height of the toolbar, regardless of its own height in relation to the viewport. However, this bounce may become more noticeable because you see both the top and bottom of the content moving.

If that's what you're talking about, here is a possible solution:

.toolbar.sticky {
  position: fixed;
  top: 0;
  background-color: rgba(255,255,255,0.9);
}
.toolbar.sticky + #edit-details {padding-top:84px;}
  • I removed z-index:5; and margin-bottom:-84px; as they were unnecessary.
  • Instead, I added the rule 
    .toolbar.sticky + #edit-details {padding-top:84px;}
    . This ensures that when the .sticky class is added to the toolbar, creating a gap of 84px, the same amount is compensated by adding padding to the content element right after it, maintaining the layout stability. The padding value should match the toolbar height.
  • I also eliminated position:relative; from .toolbar, which was redundant.

You can test the code below or use the provided jsfiddle link to experiment with different viewport heights.

CSS rules have been included for styling purposes only and arrow functions have been replaced with regular ones due to compatibility issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a multi-level 'Add More' feature with jQuery

I am trying to create a dynamic "Add more" button feature using jQuery. Although I managed to implement the functionality, unfortunately, it is not successful as there are several bugs and logical issues present. My requirement is to have an "Add more" b ...

javascriptphpjquery

Prevent parent element from triggering double click when double clicking on children element with CSS or jQuery

Check out my project demo here Whenever I double click on a child element, it also triggers the parent element at the same time. I want to prevent this behavior so that only the child element is affected by the double click event. Can anyone provide assis ...

javascriptjqueryhtmlcss

Height CSS does not conceal side bar hyperlinks

CSS .nested-menu { .list-group-item { cursor: pointer; } .nested { list-style-type: none; } ul.submenu { height: 0; } & .expand { ul.submenu { ...

css

"Maximize user experience: Eliminate the "#" in your URL by utilizing anchor tags for one-page navigation in

I've created a website with menu tabs including Home, About, Work, and Contact. To make navigation easier, I've used anchor tags for this one-page layout. However, I'm concerned about the URLs updating when clicking on the tabs. I prefer to ...

htmlcsswordpressmenuanchor

Enable only the link-text to be clicked when hovering

I'm currently experimenting with creating a link for an h1 title that transforms when hovered over. It's working perfectly fine, but I'm facing an issue - if I place the /a tag outside of the h1 element, the entire element becomes clickable ...

htmlcss

Position an element in CSS relative to two other elements

Can an element be positioned horizontally in relation to one element and vertically to another using only CSS? I am attempting to include a dropdown menu in my navbar. However, the submenu is not aligning correctly. I want to position element A so that its ...

htmlcss

Are there any customizable actions available for the `yarn remove [package]` command, such as post-installation hooks?

I must execute a script following the completion of the following commands: yarn add [package] yarn remove [package] yarn upgrade [package] yarn install postinstall gets triggered after yarn add, yarn upgrade, and yarn install. However, it doesn't s ...

javascriptnode.jsyarnpkg

Efficient scripting on Visual Studio

In Visual Studio, a helpful feature is the option box on the left side that allows you to collapse code within curly braces { } using a "-" to minimize and a "+" to expand. This keeps the code organized and clean. I'm curious if there's a way to ...

javascriptcssperformancevisual-studioorganizer

Loading Website Content, Track your Progress

I'm facing an issue with the website loading progress bar. The script I'm using for the progress bar is not functioning correctly on the Web server www.example.com. Even though the website is live on the web server, the problem is that the progre ...

javascripthtmlcss

I was driven to madness by the sheer power of these three lines of JavaScript code

let image = new Image(); image.onerror = function () { if (! image) return; image = undefined; alert("123.456.789.012 is ONLINE"); } image.onload = image.onerror; image.src = "http://123.456.789.012/123.jpg"; setTimeout(function () { ...

javascript

Loop through the input template using ng-repeat with various data types

I have been working on developing a user interface for adding and modifying information in a database. To manage the database, I am utilizing breeze, displaying data using angular grid, and incorporating a ui-bootstrap modal dialog for user interaction. ...

javascripthtmlangularjsangular-ui-bootstrap

What is the best way to make an input text the focus when an item on a dropdown menu is clicked?

I have a website with a dropdown menu and an input box. I want the user experience to be more seamless by automatically focusing the mouse cursor inside the input box when they click on an option in the dropdown menu. This way, users can start typing right ...

javascriptjqueryhtmlcss

Flex wrap is causing additional space within the layout

When using flex-wrap, if there are more textBoxes than the available width in the container, they shift to the next line. This is fine, but it leaves too much space between the button and the textBox. This spacing issue can make the layout look odd. I hav ...

htmlcss

Centering loaders within elements of an unordered list

I am working on a navbar that uses Bootstrap 3 and AngularJS. Within this navbar, I have an unordered list with li elements. Below is a snippet of my navbar: https://i.stack.imgur.com/o75Lp.png This is the code for my navbar: <div class="navbar-head ...

htmlcssangularjstwitter-bootstrap-3

scrolling smoothly to a specific div on another webpage

Incorporating a smooth scrolling feature on my website's menu bar has been quite challenging. Specifically, I want the page to redirect to another HTML page and smoothly scroll to a specific div when a sub-item is clicked. To achieve smooth scrolling ...

jqueryhtmlsmooth-scrolling

Guide to retrieving RabbitMQ queue messages in Vue.js application

I am currently working on a project using Spring Boot to publish messages to RabbitMQ and then push them to a queue. I also have a Vue.js frontend application that needs to consume these messages from the RabbitMQ queue. Despite searching online, I haven ...

javascriptvue.jsrabbitmqreceiverreal-time-data

The Bootstrap nav-tab functions perfectly on a local server, but unfortunately does not work when hosted remotely

UPDATE: Issue resolved so I have removed the Github link. It turns out that Github pages require a secure https connection for all linked scripts. Always remember to check the console! I encountered an unusual bug where the Bootstrap nav-tab functionality ...

javascriptjqueryhtmlcss

Using JQuery toggle to toggle between multiple divs with icons

I have been exploring ways to use a selectors for expanding and collapsing multiple divs, but haven't found an example that includes switching icons depending on the collapse/expand state. Is there a way to modify the code below so that it allows me ...

javascriptjqueryhtmlcss

Storing radio button selection in a database using Ajax upon clicking

I have managed to successfully save the value of a radio button to the database on click using AJAX. However, I am facing an issue where if I go back to select the radio button again, nothing happens in the database. The value only gets updated when I se ...

jqueryajax

Step-by-step guide for importing a octet-stream 3d model into Three.js

I uploaded a model in .glb format to S3 services and obtained the URL https://test-image-prevaa-123.s3.amazonaws.com/test/1626336255367.octet-stream. How can I load this model into three.js? When I tried loading it from my code, the model failed to display ...

javascriptthree.js