当用户手动滚动时突出显示锚链接? [英] Highlight Anchor Links when user manually scrolls?

问题描述

我为长篇幅道歉.我想包括所有可能有帮助的内容.

我有一个单页网站，它由几个垂直堆叠的 div 组成.我正在使用浮动导航栏和 softscroll.js 来制作锚链接单击时移动到 div.

我是一名前端设计师，但通过这个网站和数小时的试验/错误和谷歌搜索，我已经能够让所有元素正常工作.(调整窗口大小时自动调整div高度，突出显示点击的锚链接，滚动等)

我已将其设置为单击锚链接会将其类别更改为活动".这很好用.但如果用户也手动滚动到 div，我想触发同样的事情.

我查看了这篇文章中使用的代码 因为我已经看过几次了.但它取代了我已经使用的一些代码，但仍然没有突出显示.

这是我用于活动锚点的代码:

//JS 高亮选中按钮$(函数(){$("a").click(function() {//从所有的类中删除$("a").removeClass("active");//添加类到我们点击的那个$(this).addClass("active");});});

我正在使用这个根据窗口大小调整 div 的大小.不确定它是否相关，但在这里:

//Div Height Auto Resize JS$(document).ready(function(){resizeDiv();});window.onresize = 函数(事件){resizeDiv();}函数 resizeDiv() {vpw = $(window).width();vph = $(window).height();$('.layoutblock').css({'height': vph + 'px'});}

这是菜单 HTML:

<ul><li><a href="#composition" ><img src="images/icons/compicon.png" alt="composition" width="32" height="36" border="0" 对齐="中间"/>组成</a></li><li><a href="#creative"><img src="images/icons/designicon.png" alt="大格式" width="36" height="33" border="0"对齐=中间"/>创意</a></li>[...]

...和菜单 CSS:

 #navigation {背景色:#F60；位置:固定；高度:100%；宽度:60px；-moz-transition:width .5s;-webkit-transition:width .5s;-o-transition:width .5s;过渡:宽度 0.5 秒；溢出:隐藏；左:0px；顶部:0px；z-索引:99；填充顶部:30px；左边距:0px；}#导航:悬停{左边距:0px；宽度:190px；}#导航李{列表样式:无；左边距:-40px；}#navigation img {padding-left: 5px;padding-right: 20px;}#navigation li a {字体系列:Proxima N W01 Smbd"，Arial，Helvetica；字体大小:14px；显示:块；白颜色;字体粗细:粗体；文字装饰:无；文本转换:大写；行高:26px；填充左:5px;padding-right: 5px;填充顶部:10px；高度:50px；空白:nowrap；}a.主动{背景色:#333；}

最后，这里是测试页面的 URL:[为了安全起见，该网站已启动]

解决方案

好吧，我在这里找到了答案:更改页面滚动上的活动菜单项? 这导致了一个像魅力一样工作的小提琴.

我最终使用代码来监视锚标记并根据它们更改菜单.它甚至包括软滚动和点击突出显示，所以我能够摆脱我正在使用的其他片段.

还有一点很重要:我花了很长时间让它在我的网站上工作，即使它在小提琴中工作.原来我需要将代码片段放在正文的末尾，以便在注册锚点之前加载所有内容.如果其他人遇到同样的问题，这只是一个提示.

I apologize for the long post. I wanted to include everything that might be helpful.

I have a single page website that consists of several divs stacked vertically. I'm using a floating nav bar and softscroll.js to make anchor links move to the divs when clicked.

I'm a front end designer, but through this website and hours of trial/error and googling I've been able to get all elements working. (Auto resize div height when window resize, highlight clicked anchor link, scroll etc.)

I've got it set up so that clicking an anchor link changes it's class to "active". That works beautifully. But I want to trigger the same thing if the user manually scrolls to the div as well.

I've looked at the code used in this post as I've seen it a couple of times. But it replaces some of the codes I've already got working and still doesn't highlight.

Here is the code I'm using for the active anchor:

// JS for highlight selected button
$(function() {
    $("a").click(function() {
      // remove classes from all
      $("a").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

And I'm using this one to resize the divs based on window size. Not sure if it is relevant, but here:

// JS for Div Height Auto Resize 
$(document).ready(function(){
  resizeDiv();
});

window.onresize = function(event) {
  resizeDiv();
}

function resizeDiv() {
  vpw = $(window).width();
  vph = $(window).height();
  $('.layoutblock').css({'height': vph + 'px'});
}

This is the menu HTML:

<div id="navigation">
<ul>
<li><a href="#composition" ><img src="images/icons/compicon.png" alt="composition" width="32" height="36" border="0" align="middle" />Composition</a></li>
<li><a href="#creative"><img src="images/icons/designicon.png" alt="Large Format" width="36" height="33" border="0" align="middle" /> Creative</a></li>
[...]
</ul>
</div>

...and the menu CSS:

  #navigation {
    background-color: #F60;
    position: fixed;
    height: 100%;
    width: 60px;
     -moz-transition:width .5s;
    -webkit-transition:width .5s;
    -o-transition:width .5s;
    transition:width .5s;
    overflow: hidden;
    left: 0px;
    top: 0px;
    z-index: 99;
    padding-top: 30px;
    margin-left: 0px;
}

#navigation:hover {
    margin-left: 0px;
    width: 190px;
}

#navigation li {
    list-style: none;
    margin-left: -40px;

}

#navigation img {
    padding-left: 5px;
    padding-right: 20px;
}
#navigation li a {
    font-family: "Proxima N W01 Smbd", Arial, Helvetica;
    font-size: 14px;
    display: block;
    color: white;
    font-weight:bold;
    text-decoration: none;
    text-transform:uppercase;
    line-height:26px;
    padding-left:5px;
    padding-right: 5px;
    padding-top: 10px;
    height: 50px;
    white-space: nowrap;
}

a.active{
    background-color: #333;
}

Finally, here is the URL for the test page: [redacted for security now that site is launched]

解决方案

Well, I found my answer here: Change Active Menu Item on Page Scroll? which lead to a fiddle that worked like a charm.

I ended up using code to watch for the anchor tags and change the menu based on those. It even included soft scrolling and on-click highlights, so I was able to get rid of the other snippets I was using.

Also important to note: I had a heck of a time getting it to work on my site even though it worked in the fiddle. Turns out I needed to put the snippet at the end of the body so that everything would be loaded before it registered the anchors. Just a tip if anyone else experiences the same issue.

这篇关于当用户手动滚动时突出显示锚链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！