2015-06-09 15 views
7

Ich benutze jQuery, um den URL-Hash zu ändern, wenn ich auf die Navigationsschaltfläche klicke. Aber wenn ich mit dem Mausrad scrolle, ändert sich die URL nicht. Wie kann ich das machen? Wie kann esURL beim Scrollen ändern

window.history.pushState(“object or string”, “Title”, “/new-url”); 

Verwendung erfolgen bin ich nicht in der Lage, es zu verstehen. Bitte helfen mein Javascript-Code

$j(document).ready(function() { 
    $j("#start1").click(function (e) { 
     e.preventDefault(); 
     var section = this.href, 
      sectionClean = section.substring(section.indexOf("#")); 

     $j("html, body").animate({ 
      scrollTop: $j(sectionClean).offset().top 
     }, 1000, function() { 
      window.location.hash = sectionClean; 
     }); 
    }); 
}); 
$j(document).ready(function() { 
    $j("#start2").click(function (e) { 
     e.preventDefault(); 
     var section = this.href, 
      sectionClean = section.substring(section.indexOf("#")); 

     $j("html, body").animate({ 
      scrollTop: $j(sectionClean).offset().top 
     }, 1000, function() { 
      window.location.hash = sectionClean; 
     }); 
    }); 
}); 

und HTML-Code ist

<a href="#home" id="start1"style="text-decoration:none;position:absolute;right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)"><span >HOME</span></a> 
<span><a href="#products" id="start2" style="text-decoration:none;position:absolute;right:250px;top:37px;font-weight:bold;color:white;font-size:15px;transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">PRODUCTS & SERVICES</a></span> 
+0

Wie ist Ihre Navigationsschaltfläche? –

+0

Ich bin die Frage editiert, siehe –

+0

Sie sagten, Sie möchten etwas tun, wenn Benutzer Seite scrollt, aber wo ist Ihr Code für die Verarbeitung von [onscroll Ereignis] verantwortlich (http://www.w3schools.com/jsref/event_onscroll.asp) ? – Sergey

Antwort

2

Hier einige Code ist, die Ihnen helfen kann - es für die scroll Ereignis hört, und überprüft, ob eine der anchor Elemente im Ansichtsfenster. Wenn dies der Fall ist, wird der URL-Hash mit window.history.pushState aktualisiert.

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Scrolling URL Hash</title> 
    <meta name="description" content="Webpage for xxxx"> 
    <style> 
    body { 
     height: 2000px; 
    } 
    a > div { 
     min-height: 500px; 
    } 
    </style> 
    </head> 
    <body> 
    <a href="#anchor1" id="anchor1" class="anchor"><div>ANCHOR 1</div></a> 
    <a href="#anchor2" id="anchor2" class="anchor"><div>ANCHOR 2</div></a> 
    <a href="#anchor3" id="anchor3" class="anchor"><div>ANCHOR 3</div></a> 
    <a href="#anchor4" id="anchor4" class="anchor"><div>ANCHOR 4</div></a> 
    <a href="#anchor5" id="anchor5" class="anchor"><div>ANCHOR 5</div></a> 
    <a href="#anchor6" id="anchor6" class="anchor"><div>ANCHOR 6</div></a> 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script> 
    // stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport 
    function isElementInViewport (el) { 
     //special bonus for those using jQuery 
     if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
     } 
     var rect = el.getBoundingClientRect(); 
     return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
    ); 
    } 
    // click-to-scroll behavior 
    $(".anchor").click(function (e) { 
     e.preventDefault(); 
     var section = this.href; 
     var sectionClean = section.substring(section.indexOf("#")); 
     $("html, body").animate({ 
     scrollTop: $(sectionClean).offset().top 
     }, 1000, function() { 
     window.location.hash = sectionClean; 
     }); 
    }); 
    // listen for the scroll event 
    $(document).on("scroll", function() { 
     console.log("onscroll event fired..."); 
     // check if the anchor elements are visible 
     $(".anchor").each(function (idx, el) { 
     if (isElementInViewport(el)) { 
      // update the URL hash 
      if (window.history.pushState) { 
      var urlHash = "#" + $(el).attr("id"); 
      window.history.pushState(null, null, urlHash); 
      } 
     } 
     }); 
    }); 
    </script> 
    </body> 
</html> 
+0

manchmal URL ändert und manchmal nicht bu mit es –

+0

Die Funktion 'isElementInViewport' überprüft, ob Das * gesamte * Element ist sichtbar. Wenn dies nicht der Fall ist (z. B. wenn Ihr Browserfenster kleiner als das Element ist), ändert sich die URL nicht. – rphv

+0

Sie können dies umgehen, indem Sie die Ankerelemente so klein wie möglich machen (anstatt "min-height: 500px", wie in diesem Fall) oder indem Sie 'isElementInViewport' modifizieren. – rphv

1

Sie können waypoint.js verwenden. http://imakewebthings.com/waypoints/guides/getting-started/

Hier ist ein Beispielcode von der Seite, werfen Sie einen neuen Hash, wenn der Wegpunkt erreicht ist.

var waypoint = new Waypoint({ element: document.getElementById('element-waypoint'), handler: function(direction) { notify(this.element.id + ' triggers at ' + this.triggerPoint) }, offset: '75%' }) 
Verwandte Themen