Questions tagged [scrollspy]

ScrollSpy may refer to the MooTools plugin or a similar jQuery plugin, such as the one popularly used in Bootstrap. The script listens to page scrolling and fires events based on the position to which the user has scrolled.

ScrollSpy may refer to the plugin or a similar plugin, such as the one. popularly used in The script listens to page scrolling and fires events based on the position to which the user has scrolled.

346 questions
3
votes
1 answer

How to achieve Scrollspy with hash routing using react

I am working with react (Hooks), and I have done a lot of things, but here I have been stuck on one place from few days. I want to create a scrollspy using react that too with routing, where when on scroll new menu active I want to change the…
vivek singh
  • 417
  • 2
  • 12
  • 36
3
votes
2 answers

Bootstrap 5 list group scroll spy issues

I am trying to make a resume page with a scrollspy from Bootstrap 5 but the scrollspy isn't changing the way it should be. It just keeps on highlighting the bottom-most item of the list group. Iif someone could let me know where I went wrong that…
3
votes
0 answers

Scrollspy active class highlighted with wrong nav link

Am very new to Front End Development. Have applied Scrollspy as mentioned in bootstrap. However, it is not working as desired. I have 6 sticky righgt-nav and it always active on the last a tag. Even if I click any of the a tag , the active class not…
Barani
  • 31
  • 4
3
votes
3 answers

Materializecss scrollspy throttle not working

I'm making a one page website with materializecss and I'm using scrollspy to scroll between sections. This all works fine, but I would like it to scroll slower. However the option throttle for this doesn't seem to work. Check out a codepen of my…
3
votes
1 answer

ScrollSpy Effect on DIV Only

I am trying to achieve the same effect for a scroll spy but instead of a nav item, I only want to display a side by side div. On the left hand side, my div will be a long set of form, and on the right hand side, my div will contain summary of…
Angelo
  • 1,578
  • 3
  • 20
  • 39
3
votes
0 answers

ReactJS - Scrollspy doesn't work correctly on page change

Here is my index.js: var routes = require('./config/routes'); ReactDOM.render(routes, document.getElementById('app')); Here are my routes : var routes = (
Omar Lahlou
  • 1,000
  • 9
  • 33
3
votes
1 answer

bootstrap ScrollSpy not jump to div when click on dropdown menu item

Dropdown menu click ScrollSpy doesn't working Demo: http://codepen.io/anon/pen/vOyZGq $(document).ready(function(){ $('#details-dropdown li a').click(function(e){ console.log(e); $("#details-menu…
Mo.
  • 26,306
  • 36
  • 159
  • 225
3
votes
1 answer

Scroll to NEXT/PREV buttons with Bootstrap ScrollSpy

I was looking through answers for creating next and prev buttons that go through anchor points on a page, but couldn't find something I need. This one might of been close to what I wanted so I decided to use it as a starting point: How can I make a…
JuicyBB
  • 67
  • 2
  • 8
3
votes
0 answers

Smooth scrolling, scrollspy and Bootstrap

I'm having an issue when I'm using smooth scrolling and scrollspy on my website. When I click on my nav menu link I'm directed to the appropriate section. In this section I have tabs. When I click on one of the tabs the scrollbar moves up and down.…
Rocky
  • 73
  • 5
  • 9
3
votes
5 answers

Bootstrap Affix Classes Jumping at Bottom

I've managed to get the scrollspy and affix plugins to work just fine, but whenever the user scrolls to the bottom of the page (if using a small browser window) the affix classes start conflicting with another, and the affix jumps between states.…
timmyg
  • 181
  • 1
  • 14
3
votes
1 answer

Bootstrap affix navbar for single page with scrollspy and page anchors

This is for a single page, with a navbar that links to local anchors only. The navbar comes after a header, but sticks to top when scrolling down. You can see how it works on github pages But I've got two offset problems with link/anchors: as long…
3
votes
3 answers

Bootstrap horizontal scrollspy?

I am using Bootstrap's scrollspy successfully but I want to use it on a page where the destination anchors cascade horizontally. I have tweaked to no avail and cannot manage to get it working. I also tried https://gist.github.com/marcoleong/1922743…
cfx
  • 3,311
  • 2
  • 35
  • 45
2
votes
0 answers

Custom style on navbar when a section is active on the same page in Gatsby

I am trying to create a simple landing page with React. As per the title I have tried to get the active section heading (in the navbar) to be highlighted (change color) when the user scrolls to that section on the page, no success so far even after…
2
votes
1 answer

#href not working using State & Scrollspy in React App

Upgrading my portfolio in react and having an issue with the href not working for my react app. Here is the NavBar code. Live site is here. https://cigiportfolio.netlify.app/ I believe that it has to do with the use state in combination with the…
Cigi
  • 21
  • 2
2
votes
1 answer

'react-router-hash-link' How to Simulate Scrollspy with Component

I have a version of a webpage that uses the following style of scrollspy: https://getbootstrap.com/docs/4.0/components/scrollspy/#item-1-1 "When successfully implemented, your nav or list group will update accordingly, moving the .active class from…
1 2
3
23 24