scrollspy

Updating address bar window.location hash with scrollspy

由 荒凉一梦 提交于 2019-12-21 21:46:35
问题 I've got a menu with scrollspy (using twitter boostrap). I want update the window.location.hash when the user scrolls down to a next section. The following code works when the user scrolls down: $(window).on('activate.bs.scrollspy', function (e) { location.hash = $("a[href^='#']", e.target).attr("href") || location.hash; }); However it does not work very well when the user scrolls upwards. The reason for this is that setting a new location.hash triggers the browser to navigate towards that

Scrollspy Bootstrap v3.3 not working

由 狂风中的少年 提交于 2019-12-20 06:31:20
问题 Using Bootstrap v3.3 w/ affix on navigation bar. Affix is working fine, but I cannot get the scrollspy to work at all. I created a fiddle here (removed affix from fiddle) to attempt to see if it wasn't something else in my JS or w/e that wasn't correct, but fiddle is not working either. Below is example fiddle: .product-nav.affix { top: 0; left: 0; z-index: 1; width: 100%; background-color: #555; } $('.product-nav').affix({ offset: { top: $('.hero').height() } }); <body data-spy="scroll" data

ScrollSpy Effect on DIV Only

由 佐手、 提交于 2019-12-11 04:28:26
问题 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 info. I have a jsbin which illustrates what I want to achieve: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body data-spy="scroll" data-target="#myScrollspy" data

Bootstrap ScrollSpy skips section when no more scrollable area

由 南笙酒味 提交于 2019-12-11 02:52:12
问题 I am having an issue with Bootstrap ScrollSpy in regards to the scrolling position of a selected element. The issue occurs at the bottom of the page, I have multiple relatively short sections of content through out the page. They are collapsed and expand onClick, (so yes, if I choose to have all open then there seem to be no problem) and when I reach the bottom of page before all have been selected by scrollspy it jumps to the last element on nav. It seems to be a issue with no more

Bootstrap Affix Classes Jumping at Bottom

由 风流意气都作罢 提交于 2019-12-10 21:38:26
问题 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. An example can be seen here: http://devng.sdss.org/results-science/ The CSS is: .affix-top,.affix{ position: static; } #sidebar li.active { border:0 #eee solid; border-right-width:5px; } @media (min-width: 979px) { #sidebar.affix-top { position:

Use scroll-spy to change the navbar background classes

由 南楼画角 提交于 2019-12-08 12:13:00
问题 I am working on a web page in Bootstrap 4, that has sections with light and dark backgrounds and a fixed navbar. The navbar is dark (has the css class bg-dark ) and, while it is easily visible against the light sections, it is indistinguishable against the dark ones. I have added Bootstrap's scroll-spy to the page, but what it does is add the active class to the navbar items, as seen below: .page-section { padding: 70px 10px } .page-section.bg-dark * { color: #fff; } <link rel="stylesheet"

Bootstrap 3 Scrollspy Activate Event Not Firing

由 风流意气都作罢 提交于 2019-12-08 02:01:58
问题 I'm trying to create a site using Bootstrap 3 RC1 with Scrollspy. My web page is pretty simple right now, and is essentially set up like this: <html> <head> <!-- Head stuff here --> </head> <body> <section id="section_1" data-spy="scroll"> <!-- stuff in here --> </section> <section id="section_2" data-spy="scroll"> <!-- stuff in here --> </section> <section id="section_3" data-spy="scroll"> <!-- stuff in here --> </section> <JScripts here ... /> </body> </html> I've initialized Scrollspy by

Twitter Bootstrap Scrollspy highlighting last item only

由 大兔子大兔子 提交于 2019-12-07 18:12:26
问题 I have been working a Twitter Bootstrap Scrollspy plugin, but for the life of me I can not get it to work. Here is the HTML for the content area <div data-spy="scroll" > <section id="page_home" class="page_home" style="width:100%;background-color:rgb(245,245,245);"> <div class="container"> Home </div> </section> <section id="page_projects" class="page_projects" style="width:100%;background-color:rgb(25,25,25);"> <div class="container"> Projects </div> </section> <section id="page_services"

Bootstrap 3 Scrollspy Activate Event Not Firing

由 送分小仙女□ 提交于 2019-12-06 11:16:33
I'm trying to create a site using Bootstrap 3 RC1 with Scrollspy. My web page is pretty simple right now, and is essentially set up like this: <html> <head> <!-- Head stuff here --> </head> <body> <section id="section_1" data-spy="scroll"> <!-- stuff in here --> </section> <section id="section_2" data-spy="scroll"> <!-- stuff in here --> </section> <section id="section_3" data-spy="scroll"> <!-- stuff in here --> </section> <JScripts here ... /> </body> </html> I've initialized Scrollspy by calling $("section").scrollspy() and I've set up an event handler like this: $("section").on("activate",

Bootstrap 4 how to remove first affix when second affix comes to view

由 跟風遠走 提交于 2019-12-05 09:07:36
I am using bootstrap 4 scrollspy and customized affix.Problem is when second menu comes to view i need to remove the first fixed menu. Check the fiddle here https://jsfiddle.net/raj_mutant/awknd20r/ html: <body data-spy="scroll" data-target=".navbar" data-offset="50"> <header> <div class="container"> </div> </header> <section id="intro"> <div class="container"> <div class="jumbotron"> <div class="container"> <h2>Test</h2> <h1>Lorem Ipsum</h1> <h4>Lorem Ipsum</h4> </div> </div> </div> </section> <section> <nav class="tab-menu navbar navbar-expand-sm" data-toggle="affix"> <ul class="navbar-nav">
订阅 scrollspy