scrollspy

Updating address bar window.location hash with scrollspy

由 馋奶兔 提交于 2019-12-04 19:08:59
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 respective anchor. That triggers a chain reaction in which the user will instantly end up at the top of

How to use multiple target on body with Bootstrap ScrollSpy

由 ℡╲_俬逩灬. 提交于 2019-12-04 08:15:15
I want to use Bootstrap ScrollSpy with multiple nav, my main nav and a vertical subnav. I tried multiple thing like : <body data-spy="scroll" data-target="#main-nav #subnav"> <body data-spy="scroll" data-target="#main-nav, #subnav"> $('body').scrollspy({target: "#main-nav"}); $('body').scrollspy({target: "#subnav"}); $('body').scrollspy({target: "#main-nav"}, {target: "#subnav"}); Putting wrapper div: <body data-spy="scroll" data-target="#main-nav"><div data-spy="scroll" data-target="#subnav"> but nothing worked fine... How can I acheive this? Thank you! Ok, I found a way to acheive what I

Bootstrap 3.0 scrollspy responsive offsets

由 会有一股神秘感。 提交于 2019-12-03 07:59:54
I'm trying to get Bootstrap's scrollspy to work reliably on a responsive site on which the top navbar's height changes according to the width of the media/browser. So instead of hardcoding the offset on the data-offset attribute I'm setting it dynamically through Javascript initialization like this: $('body').scrollspy({ offset: 70, target: '#nav' }); For wide layouts (i.e. Bootstrap -lg) it works fine but for narrower layouts there seems to be an "accumulating" offset in effect. In other words, it works fine for the first section but then takes increasing pixels to activate the following ones

Bootstrap 3 - Scrollspy with sidebar

由 馋奶兔 提交于 2019-12-03 04:32:56
问题 I am using Bootstrap 3. I want to recreate the same functionality as the sidebar in the documentation on the Bootstrap site. Below is my code, and it is also here: http://bootply.com/82119 Two problems. The sidebar items do not highlight as you scroll down the page past each section. When you click on a sidebar item, it jumps to the relevant anchor, but half the content is not visible. Changing the data-offset value appears to have no effect. What am I doing wrong? <div class="container">

Bootstrap 3 - Scrollspy with sidebar

由 筅森魡賤 提交于 2019-12-02 18:51:07
I am using Bootstrap 3. I want to recreate the same functionality as the sidebar in the documentation on the Bootstrap site . Below is my code, and it is also here: http://bootply.com/82119 Two problems. The sidebar items do not highlight as you scroll down the page past each section. When you click on a sidebar item, it jumps to the relevant anchor, but half the content is not visible. Changing the data-offset value appears to have no effect. What am I doing wrong? <div class="container"> <div class="row"> <div class="col-md-3"> <div class="list-group navbar" id="sidebar"> <ul class="nav" id=

How to stop scrolling div which is longer than div height?

由 萝らか妹 提交于 2019-12-02 15:08:48
问题 I have image, aligning to right side and position is fixed and large text content which is aligning to left side. How the to do the image on the right side and text content should be only scroll able by using bootstrap. Here my code. Thanks for your time and suggestions <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest

Scrollspy Bootstrap v3.3 not working

由 我们两清 提交于 2019-12-02 08:23:39
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-target="#product-nav"> <header class="hero"> <img src="http://placehold.it/400x1000" /> </header> <div

Change the fixed navbar's classes depending on the background of the page section it hovers

由 ∥☆過路亽．° 提交于 2019-11-29 17:29:58
I am working on a website 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 tried to change the navbar's navbar-dark bg-dark to navbar-light bg-light when the user reaches a dark section (the solution was suggested on StackOverflow): $(window).on('activate.bs.scrollspy', function (e,obj) { if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { return; } var isBGLight = $(obj

how to use scrollspy without using bootstrap

由 六月ゝ 毕业季﹏ 提交于 2019-11-29 02:58:22
问题 Does anyone know how to use scrollspy without using bootstrap? I am trying to get this to work in one of my projects using this repository: https://github.com/sxalexander/jquery-scrollspy but it just doesn't do what the bootstrap one does. The li tags are not marked as active :( Any help would be appreciated. I have tried doing this: $('#intel_nav').scrollspy({ //n: $('#nav').offset().top, onEnter: function (element, position) { console.log(element); $("#intel_nav").addClass('moo'); },

Change the fixed navbar's classes depending on the background of the page section it hovers

由 强颜欢笑 提交于 2019-11-28 11:59:17
问题 I am working on a website 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 tried to change the navbar's navbar-dark bg-dark to navbar-light bg-light when the user reaches a dark section (the solution was suggested on StackOverflow): $(window).on('activate.bs.scrollspy', function (e,obj) { if (
订阅 scrollspy