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.

Fixed-collapsible-left-sidebar with responsive content

My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?

I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/

Vertical ticket feed with Ajax and jquery

I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.

The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show

horizontal scrolling section in PagePiling.js

I am trying to make a page which which have only two section 1st section which is at top have please see the image . Now I m able to go to div 1 to div 2 easily using pagePiling.js. can anyone tell me how to achieve the horizontal effect in div 1 . and after the end of the content on div 1 it must pagePile to div 2 . and when coming back to div 1 it user also see the effect of horizontal scroll.

In case you want to have a section with large content and therefore create an scroll bar for that section, you can do it by adding the class pp-scrollable to that section:

How to make this div scrollable?

So in my portfolio which is at http://wrobbins.me/new if you click a portfolio piece the #headerwrap expands to the window height. A group of 'showcase' is then loaded into the #job-display. I want to disable the main page's scrolling, and have the showcase be scrollable so the information wont be cut off (as you can see is happening now). This is what I'm using to expand the #header-wrap on click.
var viewport = $(window).height();
$('#header-wrap').animate({height: viewport}, 700, function(){
$('#job-display').load("content.html#" + job, function(){
$('#job-display').fadeIn(700);
jcheck = 1;
});
});
In addition, when a portfolio piece is clicked on the site, the page jumps up to the top of the page and then expands the header-wrap. How would I go about stopping it from jumping?

To make the div scrollable you need to specify a height to #job-display. for example
$('#job-display').height(500);
To remove the page scroll ,You have specify overflow-y : scroll for html tag. You will need to make it as overflow-y : hidden