logo
down
shadow

Bootstrap scrollspy only gets height offset on second click


Bootstrap scrollspy only gets height offset on second click

By : Rafet Güven
Date : November 17 2020, 01:00 AM
may help you . That because you set the navbar to fixed on scroll down (after y > 90). So you need to discount the height of the navbar when it's fixed.
You need a dynamic value, based on your code, a way to do this is using a function with the same parameters. The height of the navbar is 30px so you need to add it.
code :
function offsetHeight() {
  if ($(window).scrollTop() > 90) {
    return 120;
  }
  else {
    return 150;
  }
}; 


Share : facebook icon twitter icon
How do I set the offset for ScrollSpy in Bootstrap?

How do I set the offset for ScrollSpy in Bootstrap?


By : Fredo
Date : March 29 2020, 07:55 AM
I hope this helps . Bootstrap uses offset to resolve spying only, not scrolling. This means that scrolling to the proper place is up to you.
Try this, it works for me: add an event handler for the navigation clicks.
code :
var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});
Bootstrap 3 Scrollspy Offset Not Working In IE9 and Later

Bootstrap 3 Scrollspy Offset Not Working In IE9 and Later


By : Fred T.
Date : March 29 2020, 07:55 AM
With these it helps I determined the issue is resolvable by using both the data-offset="" in the body class, along side the javascript implementation. I found that both are needed to get full browser support. (oddly the body attribute doesn't work in many browsers (in my case) so using both methods was the best solution)
bootstrap scrollspy offset Height not working in firefox

bootstrap scrollspy offset Height not working in firefox


By : MrFMV
Date : March 29 2020, 07:55 AM
will help you I use this script for scrollspy offset height in my bootstrap theme. This code doesnt work properly in firefox and the heght offset aint operate, this works on chrome. , I had the same Problem and solved it with this
code :
history.pushState(null, null, myHash);
window.location.hash = myHash;
bootstrap offset scrollspy not working

bootstrap offset scrollspy not working


By : Alfredo.G
Date : March 29 2020, 07:55 AM
should help you out I don't think offset does what you think it does. I Doesn't determine the 'scroll-to' position. You'll have to do that with padding.
Offset in this context means the distance between the top of the screen and the section you're scrolling to. In other words: all it does is determine at which moment the navbar > a tag changes to an active state.
data-offset in Bootstrap Scrollspy is not offseting at all

data-offset in Bootstrap Scrollspy is not offseting at all


By : Vincent
Date : March 29 2020, 07:55 AM
I hope this helps you . Argh. Couple things wrong with my code.
I was trying to set attributes using CSS! WOW rookie mistake. I need some sleep. I was using navbar-fixed-top class. So I had to manually offset by 150px.
code :
$("body").attr({
    "data-spy": "scroll",
    "data-target": ".navbar"
  }).scrollspy({
    offset: 150
  });
Related Posts Related Posts :
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • store newline character with string in a variable
  • MP4 videos in Flowplayer does not play in Windows 7 Chrome
  • jquery focusin event not firing
  • How to debug Vue application with google chrome
  • html 5 web app cache download complete javascript alert?
  • Ember.js setupController fired only once
  • How to validate a currency input
  • How to convert my Array of data to key & value pair
  • Statistics circles in CSS
  • So I wanted to make a trig solver in javascript?
  • Showing HighCharts series name on x-axis and in legend
  • In Rails, how can we pass parameters in script?
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org