As detailed in the Bootstrap 3 documentation, I have included the following attributes in a navbar:
<nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" >
...
</nav>
Unfortunately, when scrolling down the page with Bootstrap 4, the affix class is not being added to the navbar. Can someone provide guidance on how to resolve this issue? Both Bootstrap.js and jQuery.js are functional.
While Bootstrap has removed the affix feature in version 4, you can still accomplish the same effect using this jQuery snippet:
$(window).on('scroll', function(event) {
var scrollAmount = $(window).scrollTop();
if (scrollAmount == settings.scrollTopPx || scrollAmount > 70) {
$('.navbar').addClass('fixed-top');
}
});
Update Bootstrap 4
The documentation suggests using the sticky polyfill, but the ScrollPos-Styler recommended does not effectively manage scroll position (an offset can be easily defined).
In my opinion, it is simpler to utilize jQuery to monitor the window scroll and adjust the CSS accordingly to make it fixed...
var toggleAffix = function(affixElement, wrapper, scrollElement) {
var height = affixElement.outerHeight(),
top = wrapper.offset().top;
if (scrollElement.scrollTop() >= top){
wrapper.height(height);
affixElement.addClass("affix");
}
else {
affixElement.removeClass("affix");
wrapper.height('auto');
}
};
$('[data-toggle="affix"]').each(function() {
var ele = $(this),
wrapper = $('<div></div>');
ele.before(wrapper);
$(window).on('scroll resize', function() {
toggleAffix(ele, wrapper, $(this));
});
// init
toggleAffix(ele, wrapper, $(window));
});
Bootstrap 4 affix (sticky navbar)
EDIT: Another approach is to consider using this version of the 3.x Affix plugin as a substitute in Bootstrap 4.
Related: Animate/Shrink NavBar on scroll using Bootstrap 4
According to the latest bootstrap v4 documentation:
Removed the Affix jQuery plugin. It is now recommended to use a
position: stickypolyfill instead. For more information and specific polyfill recommendations, check out HTML5 Please entry.If your previous use of Affix included applying additional styles beyond just
position, some polyfills may not fully support that functionality. One alternative solution in such cases is to consider using the third-party library called ScrollPos-Styler.
Expanding on Anwar Hussain's solution, I achieved success using the following approach:
$(window).on('scroll', function (event) {
var scrollValue = $(window).scrollTop();
if (scrollValue > 120) {
$('.navbar').addClass('affix');
} else{
$('.navbar').removeClass('affix');
}
});
This code will add the 'affix' class to the navbar when scrolling down, and remove it when scrolling back up. Previously, the applied class would persist even while scrolling back up.
According to Vucko's statement in the Migration documentation, I found the ScrollPos-Styler library to be very useful for my needs.
.js ScrollPos-Styler (scrollPosStyler.js) file to your webpage.<div> that you want to make 'sticky'.<nav class="navbar navbar-toggleable-md">sps sps--abv classes.<nav class="navbar navbar-toggleable-md sps sps--abv">.css styles that will be activated once the element becomes sticky (refer to the demo page)./**
* 'Shared Styles'
**/
.sps {
}
/**
* 'Sticky Above'
*
* Define styles to apply
* Before becoming sticky
**/
.sps--abv {
padding: 10px;
}
/**
* 'Sticky Below'
*
* Additional styles to apply
* After becoming sticky
**/
.sps--blw {
padding: 2px;
}
$(window).on('scroll', function (event) {
var scrollValue = $(window).scrollTop();
var offset = $('[data-spy="affix"]').attr('data-offset-top');
if (scrollValue > offset) {
$('[data-spy="affix"]').addClass('affix-top');
var width = $('[data-spy="affix"]').parent().width();
$('.affix-top').css('width', width);
} else{
$('[data-spy="affix"]').removeClass('affix-top');
}
});
Here is a solution for those seeking to achieve this effect using only pure Javascript:
window.addEventListener('scroll', () => {
let scrollPos = window.scrollY;
if (scrollPos > 120) {
document.querySelector('.navbar').classList.add('affix');
} else {
document.querySelector('.navbar').classList.remove('affix');
}
});
If you're using Bootstrap 4, there is a dedicated class for this purpose. Simply remove the
data-spy="affix" data-offset-top="90"For more information, refer to the official documentation.
Despite trying numerous solutions, especially after realizing that affix was no longer included in bootstrap 4, I finally found the perfect fix for achieving sticky elements - utilizing sticky-kit.
This jQuery plugin proved to be incredibly straightforward to implement.
All I had to do was add the code to my project and then specify the element I wanted to stick using:
$("#sidebar").stick_in_parent();
Implementing a fixed-top class in Bootstrap 4 and utilizing addClass and removeClass.
$(window).on('scroll', function(event) {
var scrollValue = $(window).scrollTop();
if ( scrollValue > 70) {
$('.navbar-sticky').addClass('fixed-top');
}else{
$('.navbar-sticky').removeClass('fixed-top');
}
});
I am encountering an issue with my single page application, which is developed in .net core MVC 2.2. The application loads html sections on the fly. In the main document, I have added a Content Security Policy (CSP) policy with a dynamically generated hea ...
Within my project, I have a masterData.js file that serves as a repository for my master data. This file retrieves data from my mongo db and distributes it to various components of the project. To facilitate this process, I have implemented a function with ...
I'm in the process of developing a Nuxt website and I need to be able to edit a specific JavaScript file after building in order to update the content of a table. Does anyone have any suggestions on how I can achieve this? So far, my attempts to incl ...
I'm searching for effective solutions to solve this issue that has me stumped, and haven't come across any suitable libraries. What I'm looking for specifically is a way to track a Component's vertical position (Y) when scrolling, but ...
/*Custom Styling for Divs*/ #box1 { border: 1px solid; border-radius: 25px; width: 900px; } #box2 { border: 1px solid; border-radius: 25px; width: 430px; } #box3 { float: right; border: 1px solid; border-radius: ...
I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...
In my code, there is a function called toggleContent() which performs the following actions: function toggleContent() { var parent = this.parentElement; toggleClass(parent,"detailsAreVisible"); } When a user clicks on a specific button, this fun ...
In order to access the locale and locales properties from use router, I am importing them from next/router. However, an issue arises when using next/router. Interestingly, the problem disappears when I switch the import to next/navigation. Unfortunately, ...
I've been struggling to understand why this import is failing. Despite trying numerous approaches, modifying the export and import based on various tutorials online, it continues to result in failure every time. This should be a simple task in theory. ...
Is it possible to have different text colors for each tab in a mat-tab-group and change the color of the blue outline at the bottom? If so, can you provide guidance on how to achieve this? Here is the default appearance of the tabs in my app: https://i.st ...
A colleague and I are collaborating on a website for his cookery business. He has sketched out some design ideas on paper, one of which involves having a homepage with 4 different sections stacked on top of each other. Each section would have an arrow butt ...
I've encountered an issue where my 2×3 grid of images and text is perfectly centered on desktop but has a strange offset on mobile devices. Here's how it appears on the desktop: https://i.sstatic.net/HXqFq.jpg and here's the layout on mob ...
When working with an express route, I need to track a user's database access without: waiting for the process to complete before executing the user's task worrying about whether the logging operation was successful or not I'm uncertain if ...
UPDATE: Upon further investigation, I discovered that by adding "async" to the function signature, the output now displays in the intended order. However, I am still encountering an error regarding setting headers after they have already been sent, even th ...
How can I change the border color of an input on focus using styled-components and React? Here is the code snippet I am currently using: import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; const String ...
I am currently encountering difficulties implementing Firebase in my Node.js project. Below is the code snippet that I am attempting to execute on Node. var firebase = require("firebase"); var admin = require("firebase-admin"); var serviceAccount = requi ...
Hey everyone, I'm currently developing a website and encountered an issue with placing content inside the body tag within a div element. I attempted to place the div inside the body tag, but the outcome was unexpected: https://i.sstatic.net/2zjqf.jp ...
Learn how to utilize tinyMCE custom binding using. public sealed class CabinetShapeEditModel { public string Description { get; set; } } When implementing in the view: <script type="text/javascript"> var jso = @Html.Raw(Json.Encode ...
I have created a simple function that wraps a div tag inside another div tag when the browser window exceeds a certain width of x pixels. However, I've encountered a strange bug when resizing the page more than once. Let me share with you the jQuery ...
Searching for assistance with the problem below regarding my model class. I've attempted various approaches using the .pipe.map() and importing {map} from rxjs/operators, but still encountering the error message [object Object] export class AppProfile ...