Develop Reference

How to keep Bootstrap 5 Scrollspy active link in view while scrolling through page

I have a Scrollspy nav sidebar generated by the contents of the main page. Scrollspy is working fine when I click any of the navigation links, and the nav is correctly updating the links as Active while scrolling through the document.
Because my sidebar is so large, I've set the max height of the column to the viewports' height. I'm trying to keep the Active Scrollspy link centered in the sidebar column using the activate.bs.scrollspy event.
$(window).on('activate.bs.scrollspy', function(event){
var $scrollSpyNavWrap = $scrollspyNav.children("div:first");
var $scrollSpyNavActiveLink = $scrollspyNav.find(".active:first");
$scrollSpyNavWrap.scrollTop($scrollSpyNavWrap.scrollTop() + $scrollSpyNavActiveLink.position().top - $scrollSpyNavWrap.height()/2 + $scrollSpyNavActiveLink.height()/2);
});
Adding the code above works when scrolling through the page. The links are correctly updating with the Active class, and the sidebar is keeping the Active link in the center of the sidebar nav.
However, this code blocks the Scrollspy from working correctly when clicking any of the links in the sidebar. If one is clicked, the page starts to scroll, the moment the next section is reached the activate.bs.scrollspy is triggered again and stops the animation. So at most I can go up or down one section.
I searched through the activate.bs.scrollspy event and cannot find anything to check to see if it was a click event versus a scroll event.

Slick Slider js not recentering with scrollSpy

So I created a horizontal mobile Menu navigation with Slick Slider and also added a scroll Spy to add active class to the li when scrolling passed categories.
So far it looks great. Here is the link, make your browser be mobile size (because it is only visible on small screens)
And visit http://www.2017.jukeboxburgers.com/menu click on the " Explore the Food... " button, and swipe.
When you click in the nav it works well, the li gets centered, but now if you scroll down some more until you pass a few categories, and then click the "explore the food" button again, the current category you scrolled too is not centered.
Is there an event listener for something like this? Or a way to make it recalculate the li.active and center it??

So was able to make it work!
So my scrollSpy puts a class of .active on the li that I've passed. Slick Slider wasn't going to them but now it's working. Here's how I did it:
var current_index = $(".mobile_food_slider .active").attr("data-slick-index");
$(".mobile_food_slider").slick("slickGoTo", current_index);

How to disable body scrolling when a particular button is clicked

I created a HTML page with menu & content.
Everything is working fine for desktop, but when menu is clicked in mobile, the content of the body overlaps with menu items when scrolled (when menu is scrolled, the content is also scrolling).
I tried using overflow: hidden and position:fixed,
but it is making entire page non-scrollable, even when the button is not clicked.
Can anyone please help me with this ?
I tried the following :
My JS :
$(document).ready(function () {
$("#mobile-toggle").click(function () {
$('body').css('overflow', 'hidden');
});
});
My button :
<button id="mobile-toggle" class="mobile-toggle">
_('mobile-toggle')<span></span>
</button>
It is disabling scrolling when clicked, but it's not working on mobile.

You need to rework your css so that it is responsive - here would be a good start Responsive Design

Try to target the html element with your selector too:
$('body,html').css('overflow', 'hidden');

Normal scroll not working

I have the holdings section in my website:
eurocom, when click on part of the map, a lightbox open and I don't want to enable scroll in that phase.
so I put:
normalScrollElements:'#myModal',(light box id)
normalScrollElementTouchThreshold:0,
I have some questions:
when try to open the lightbox(by clicking on some map area) and then fast scroll to next section after you clicked (especially in longer then screen lightbox) , you can scroll, while when clicking on some map area and waiting a second after the lightbox is shown you cant scroll as I wish.
what is normalScrollElementTouchThreshold ?
Please help me to solve this.

You're using the fullpage-js plugin on the element $('#fullpage').fullpage(... but the modal has larger z-index than the modal block the scroll event of the #fullpage.
Please read this What does the Fullpage.js option normalScrollElementTouchThreshold do?.

How can I reveal a div at the bottom of a page, then jump to it?

I'm building a progressively-enhanced, Bootstraped web application that features task-centric help on every page. The help area div (id="help_area") loads in a hidden state; generally when the user clicks on the "help" button (a id="nav_help_button"), the main content div condenses from span12 to span9, and the help area is revealed as a span3. This works well.
Because I want to support mobile and tablet, I'm using Bootstrap's responsive scaffolding. So if you are viewing the page on a narrow viewport, clicking on the help button "reveals" the hidden help area at the bottom of the page‡. I'm trying to use jQuery's .slideToggle()'s callback method to execute JavaScript (window.location.hash = "help_area";) that "jumps to" the help area after it is revealed, but having no luck with the jumping (it doesn't error; it just doesn't move browser focus to the help area).
How can I reveal a div at the bottom of a page, then jump to it? I'm also using preventDefault so the browser won't try to jump to the internal link before the target is revealed. Could that be the conflict?
Here's the relevant ECMA script:
$('#nav_help_button').click(function(event) {
"use strict"; //let's avoid tom-foolery in this function
event.preventDefault(); //don't let a tag try to jump us to #help_area before we reveal it
//adjust spans of main block and help area, set aria-hidden attribute on help block to help screen-readers
if ( $('#help_area').attr('aria-hidden')==='true' ) {
$('#content_container.span12').switchClass('span12', 'span9', 300);
$('#help_area').delay(300).slideToggle(300, function() { window.location.hash = "help_area"; }).attr('aria-hidden', 'false');
}
else {
$('#help_area').slideToggle(300).attr('aria-hidden', 'true');
$('#content_container.span9').delay(300).switchClass('span9', 'span12', 300);
}
});
I have also set up a JSFiddle that illustrates the problem.
To duplicate
open http://fiddle.jshell.net/jhfrench/HdCbu/7/show
then resize that browser window until "PTO, AIT Life, Hours Worked", etc stacks on top of each other
click on the button in the upper-right corner (the one with three white horizontal bars) to reveal the nav menu
click on the blue "help" button to execute the reveal/jump-to.
‡ As the right-most div, everything to the left of it gets stacked on top, so the newly "revealed" help area is generally below the visible portion of the page.
Related:
Javascript to make the page jump to a specific location
http://api.jquery.com/event.preventDefault/
http://api.jquery.com/slideToggle/

Your JSFiddle does jump when I do exactly as you say (steps 1-4) for my browser, which is Chrome 24. What's your browser?
But perhaps this is your problem. If I navigate to http://fiddle.jshell.net/jhfrench/HdCbu/7/show/#help_area (note the appended hash tag) and perform your steps 1-4, my browser does NOT jump. Note that when you first navigate to that URL, there is no visible #help_area. Thus, the URL you're navigating to specifies a hash tag that's invisible. Perhaps the browser is a bit confused by this and just leaves the #help_area hash tag in a bad state. It won't allow scrolling to it from then on, even after it becomes visible. Speculation, but I hope it's helpful!