jquery waypoints hilighting navigation [英] jquery waypoints hilighting navigation
问题描述
我正在学习使用jQuery航点创建带有粘性标题的单页网站的教程。
I was following a tutorial on creating a single page website with a sticky header using jQuery waypoints.
在我对HTML结构稍作修改之前，一切正常。
Everything worked fine until I made a little change to my HTML structure.
我将导航放在我的关于部分下面，该部分附在航点上。在我的导航下，还有另一个没有附加到航点的部分，因为它的内容仍然属于我的约部分。
I placed the navigation under my "about" section which is attached to a waypoint. Under my navigation there's another section which is not attached to a waypoint, since its content still belongs to my "about" section.
然后附加到航点的其他两个部分如下。
Then two other sections attached to waypoints are following.
我的粘性功能和我的滚动功能正常但突出显示有关部分的问题，因为我将导航放在 id部分下=约
My sticky function and my scroll function work fine but there's a problem with highlighting the about section since I put my navigation under the section with id="about"
我这里有一个jsFiddle： http://jsfiddle.net/8GENv/
I have a jsFiddle here: http://jsfiddle.net/8GENv/
我很确定问题出现在以下代码中：
I'm pretty sure the problem is in the following code:
var sections = $(".waypointsec");
var navigation_links = $(".navigation .innernav ul li a");
sections.waypoint({
handler: function(event, direction) {
var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('.navigation .innernav ul li a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("selected");
active_link.addClass("selected");
},
offset: '60%'
})
推荐答案
我发现，对于粘性导航，路点可以升级为笨拙，并且所选状态总是随时关闭，尤其是所有不同的屏幕尺寸选项。
I have found that waypoints can be abit 'clunky' for a sticky nav and the selected states are always abit off, especially with all the different screen size options around.
这个插件更好，更容易使用，并且有很好的文档记录。它是用普通的旧javascript编写的，你可以用css做一些非常酷的东西！
This plugin is much better and way easier to use and really well documented. It is written with plain old javascript and you can do some really cool stuff with just css!
https://github.com/Prinzhorn/skrollr
示例可能是这样的
<div id="something" data-0="position:static;" data-110="position:fixed;top:-110px;left:0;width:100%;"></div>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/skrollr.min.js"></script>
<script type="text/javascript">
//http://detectmobilebrowsers.com/ + tablets
(function(a) {
if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a)
||
/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
{
//Add skrollr mobile on mobile devices.
document.write('<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/skrollr.mobile.min.js"><\/script>');
}
})(navigator.userAgent||navigator.vendor||window.opera);
</script>
<!--[if lt IE 9]>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/skrollr.ie.min.js"></script>
<![endif]-->
<script type="text/javascript">
window.onload = function() {
skrollr.init({
forceHeight: false
});
}
</script>
这篇关于jquery waypoints hilighting navigation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
