Bootstrap Offset Scrollspy funktioniert nicht

Die Navbar funktioniert so gut wie die reibungslose Scroll, aber ich kann den Offset nicht ändern. Mein nav ist 86px, aber egal wie viele px ich es ändere geht immer noch an den gleichen Ort.Bootstrap Offset Scrollspy funktioniert nicht

$(document).ready(function() { 
    $('body').scrollspy({target: ".navbar", offset: 86}); 
    $("#myNavbar a").on('click', function(event) { 
     if (this.hash !== "") { 
      event.preventDefault(); 
      var hash = this.hash; 
      $('html, body').animate({ 
       scrollTop: $(hash).offset().top 
       }, 800, function(){ 
       window.location.hash = hash; 
      }); 
     } 
    }); 
});

Ich habe die Info direkt zum Body-Tag hinzugefügt und immer noch keine Änderung. Ich weiß, dass jQuery funktioniert, da es glatt scrollt und das Kollapsed ebenfalls funktioniert.

<body data-spy="scroll" data-target=".navbar" data-offset="86">

Quelle

2016-06-12 JonW

Ich glaube nicht, Offset tut, was Sie denken, dass es tut. I bestimmt nicht die Scroll-to-Position. Das musst du mit Padding machen.

Offset in diesem Kontext bedeutet die Entfernung zwischen dem oberen Bildschirmrand und dem Abschnitt, zu dem Sie scrollen. Mit anderen Worten: Es wird nur bestimmt, zu welchem Zeitpunkt die navbar> ein Tag in einen aktiven Zustand wechselt.

Kasse aus: https://jsfiddle.net/wietsedevries/gu0b0dg2/1/

In diesem Beispiel habe ich data-offset="51" festgelegt haben, die Höhe der navbar ist auch 51px, so, wenn ich scrollen navbar nach unten> ein Tag-Änderungen in einen aktiven Zustand genau dann, wenn die navbar Hits die Sektion.

Quelle

2016-06-12 15:46:16

OK danke das macht Sinn. Gibt es einen anderen Weg anstatt Padding zu verwenden, um einzustellen, wo die Seite endet, wenn Sie auf eine Navigationsleiste> ein Tag klicken? Im Moment habe ich das Container-Div die ID wie home über etc. – JonW

Die Seite blättert zu dem Element mit der entsprechenden ID, so dass Sie ein verstecktes Dummy-Element mit dieser ID hinzufügen und positionieren Sie es, wo Sie es möchten. –

Wenn dies Ihre Frage beantwortet, bitte als beantwortet markieren;) –

Ja, Offset ist nur dort zu bestimmen, wenn Ihre Nav-Link markiert ist. Ihren Bildschirm nicht zu positionieren, wenn Sie auf den Link klicken. I.e. Der Scrollteil liegt bei Ihnen. Sie können ein kleines JS verwenden, um das zu tun:

Quelle

2017-07-12 14:03:06 Josh

Bootstrap Offset Scrollspy funktioniert nicht

Antwort

Verwandte Themen