Create a Bootstrap Affix that sticks the header at the top of the page after scrolling 100

Currently, I am implementing Bootstrap Affix on my header with the intention of making it fixed after scrolling 100px down the page. Here is the jQuery code snippet I have incorporated:

$('#navbar').affix({
      offset: {
        top: 100,
      }
    });

However, I have encountered an issue where the content jumps up when I scroll. I tried adding a wrapper with minimum height, but that did not resolve the problem.

If anyone could offer assistance, it would be greatly appreciated!

For reference, here is the link to the fiddle: https://jsfiddle.net/b5fusmsn/12/

jquerycsstwitter-bootstrapaffix

Answer №1

The flicker/jump occurs when the navbar transitions from position:static to postition:fixed. To prevent this, ensure there is a div of 100px in height above the navbar as seen in this question.

In your situation, it seems like you want to reduce the navbar padding after scrolling 100px. In that case, maintain the navbar's position as fixed and adjust the padding when .affix is applied...

https://jsfiddle.net/etxyk0y1/1/

.navbar {
    min-height: 50px;
    z-index: 99998;
    background:red;
    width:100%;
    position: fixed;
    transition: all .5s;
    top: 0;
}

.affix-top.navbar {
    padding-bottom: 20px;
    border: 1px solid transparent;
    padding-top: 20px;
}

.affix.navbar {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.9em;
    border-bottom: 1px solid #f9f7f3;
    transition: all .5s;
}

Utilize the nav-wrapper to maintain spacing between the fixed navbar and the content.

.nav-wrapper {
    padding-top: 100px;
}

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

Outlook fails to recognize table cell widths when there is an image present

Although this question has been asked previously, the solutions provided did not solve my issue. I am trying to set the width of the <td> element to 70%, but when I insert an image it is affecting the widths of received emails in Outlook (I use MS O ...

htmlcsshtml-tableoutlookhtml-email

Expanding the padding of the selected item to create more breathing room

Upon examining the following: https://jsfiddle.net/h8kmove5/27/ Let's say you select 9 at the bottom. The display shows 8 9 10. My intention is to create some additional space on either side of 9, or any other active item for that matter. This way, ...

javascriptjqueryhtmlcssowl-carousel

Tips for converting it into an array

Utilizing jQuery's $.post function to retrieve data from a php file (retrieved from mysql), the output appears as follows: data = [['12-25-2012',62],['12-26-2012',60]] Upon storing this data in a variable, it is saved as a string ...

jqueryajax

Insert a horizontal line within the text

I am struggling to get the horizontal lines to work on my traffic light dashboard view for one of my website pages. Despite making multiple adjustments, it seems like I just can't get them to display correctly. Here is an example of what I want: View ...

htmlcss

"What is the best way to use jQuery to make the second list item become active

Within my jQuery tab setup, I am needing to have the second tab selected as the default. However, I am encountering an issue when trying to designate the active class to the second li. The following code snippet successfully adds the active class to the ...

jquery

The newly added highlighted CSS in jQuery cannot be removed once an alert is generated

http://jsfiddle.net/Cyjye/ I am a beginner with jquery. I have created an HTML table shown in the jsfiddle link. Initially, the selection should be made from the second row, second cell, but in my HTML table, the selection is being made from the first ro ...

jqueryhtmlcss

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Coding with JavaScript var changeHeight = () => { let flag = 0; while(flag != 1) { size += 1; return size; } if(size == window.innerHeight/2){ flag == 1; } } var size = 5; document.body.style.height = &qu ...

javascripthtmlcss

Position a div off-center using CSS styling

Currently, I am utilizing a flexbox to center a div inside another div, akin to a dialog window that pops up at the center of the screen when required. The functionality is sound, but aesthetically it would be more pleasing if the space above and below th ...

htmlcssflexboxcentering

The collapsible toggle menu fails to collapse on mobile-sized screens

I've experimented with basic Bootstrap in order to create a toggle menu, but I'm encountering issues. The menu collapses instead of expanding when the screen size is maximized ('m'). Furthermore, clicking on the toggle icon does not cau ...

htmljquerycss

The Material UI ToolTip displays inaccurately when placed within a container that has overflow scroll enabled

Within my ReactJS application, I have implemented a list of Material UI ToolTips with IconButtons nested inside a div element featuring overflow: scroll. One specific row displays the Material UI ToolTip in the following manner: <ClickAwayListener onCl ...

javascripthtmlcssreactjsmaterial-ui

javascript for accessing JSON data both forwards and backwards

I am attempting to implement Next/Previous buttons for a json array, but I am encountering difficulties in making it work. Here is my latest attempt: <div id="text"></div> <button name="prev">go to previous div</button> <but ...

javascriptjqueryarraysjson

Creating a URL using Form Fields with Javascript or jQuery - Reg

Creating a Custom URL with Form Fields using JavaScript or jQuery I am looking to generate an external link by incorporating a form with a dynamic variable as shown below: (Where 2500 can be customized based on user input) The final URL will be display ...

javascriptjqueryformspaypal

Reduce the density of x-axis labels in highcharts

Do you have any input on Highcharts? This chart belongs to me: https://i.sstatic.net/OAjJJ.png I am looking to reduce the density of x-axis labels, similar to the y-axis. Your assistance is greatly appreciated. Edit: for instance, take a look at this ...

javascriptjqueryhighcharts

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

javascriptjqueryhtmlcss

Guide to displaying WordPress functions within an accordion in my loop

Currently, I'm working on implementing a vertical accordion feature that will display blog posts within each section. The idea is to have 5 of the most recent posts displayed in the accordion, with each post showing the date (day/month/year) and title ...

phpwordpresscssloopsaccordion

Invoke the jquery plugin upon completion of the HTML load via Ajax

For my current project, I needed to style input radio buttons and decided to use the jquery uniform plugin. However, the radio buttons are displayed after some Ajax content is loaded onto the page. Since I do not have permission to edit the form or Ajax ...

javascriptjqueryajaxknockout.js

The text appears as regular bold instead of extra bold in Chrome

Having trouble with displaying the Open Sans Extra-Bold font? Check out the font here: I've tried everything, but it just won't show up on my website. Any suggestions? Here is the code on JSFiddle for reference: https://jsfiddle.net/0hhbgyrd/ ...

csssasswebfonts

The H1 heading sets the stage, layered behind the captivating background image

I'm having trouble getting the h1 header to stand out over a background image with a box-like color for the header. Every time I make changes to the h1, they seem to be hidden behind the background image and only briefly show before being covered up. ...

htmlcssflexbox

What is the method for defining the maximum selectable month in mtz.monthpicker?

(edited) Currently, I am utilizing the jquery.mtz.monthpicker plugin along with jquery. My goal is to limit the selection of future months, but it appears that there are no options similar to 'maxDate' like in jquery.ui.datepicker. $('inp ...

javascriptjquery

Tips for transferring the anchor value using jQuery AJAX to PHP

I have been attempting to use jQuery to send the values of a couple of anchors to a PHP file, but I am not receiving any callback from the PHP script. <div class="result"></div> <a href="#" value="5" class="star">Star 5</a> <a ...

phpjqueryajaxanchor