通过 localscroll 和 scrollto,我构建了一个水平滑动页面(Environment),还将哈希添加到 url。示例:当从 localScroll 单击导航中的链接时,它会在 url (index.html#media) 中添加哈希。
现在通过 Localscroll 没有活动链接支持,我想添加它并在这里找到了一些解决方案:Stackoverflow
我很高兴,但后来我尝试重新加载页面,当用户在媒体部分时,例如在媒体部分,不支持识别 url,并且它不会将选定的类添加到当前选择的导航链接中网址。
所以我做了更多的研究,发现了那个网站:网站
很棒,但它不适用于我的水平设置。我几乎没有开始了解javascript,我什至根本不知道如何jquery,所以我用我的逻辑修改了脚本并且到目前为止:
我添加了类,即使当我通过鼠标滚轮滚动时,它也很好地将类添加到所有导航链接。但是:它不会删除它们。
<script style="text/javascript">
$(function(){
var sections = {},
_width = $(window).width(),
i = 0;
// Grab positions of our sections
$('.section').each(function(){
sections[this.name] = $(this).offset().left;
});
$(document).scroll(function(){
var $this = $(this),
pos = $this.scrollLeft();
for(i in sections){
if(sections[i] > pos && sections[i] < pos + _width){
$('#nav ul li a').removeClass('selected');
$('#nav_' + i).addClass('selected');
}
}
});
});
$(".scroll").click(function(event){
event.preventDefault();
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.left;
$('html, body').animate({scrollLeft:target_top}, 800);
});
</script>
如何更新链接以删除选定的类?
编辑:我认为我很接近我认为它需要更改 for 标头
if(sections[i] > pos && sections[i] < pos + _width)
将“选定”类分配给当前查看的幻灯片需要进行哪些更改