滚动时更改网址

我使用jQuery在单击导航按钮时更改URL哈希。但是当我使用鼠标滚轮滚动时，URL不会改变。我怎样才能做到这一点？如何使用它滚动时更改网址

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

做我不能够理解它。请帮我的javascript代码

$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; 
     }); 
    }); 
});

和HTML代码是

<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>

来源

2015-06-09 Kushagra Singh Rajput

你的导航按钮是怎么样的？ –

我编辑的问题请参阅 –

你说你想在用户滚动页面时做些什么，但是你的代码负责处理[onscroll事件]（http://www.w3schools.com/jsref/event_onscroll.asp）？ – Sergey

下面是一些代码，可以帮助你 - 它侦听scroll事件，并检查是否有任何anchor元素是在视口中。如果是，URL哈希将更新为window.history.pushState。

<!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>

来源

2015-06-09 19:51:39 rphv

有时URL更改，有时不使用它 –

函数'isElementInViewport'检查以查看是否*整个*元素是可见的。如果不是（例如，如果您的浏览器窗口小于元素），则URL不会更改。 – rphv

您可以通过使锚点元素尽可能小（而不是'min-height：500px'，如在这种情况下）或通过修改'isElementInViewport'来解决此问题。 – rphv

您可以使用waypoint.js。 http://imakewebthings.com/waypoints/guides/getting-started/

这是来自页面的示例代码，当到达航点时抛出一个新的散列。

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

来源

2015-06-09 20:14:52 pictus

滚动时更改网址

回答

相关问题