对于单页布局网站,我需要当前部分的标题显示在屏幕左侧的固定位置,以便向用户显示他当前所在的位置。
标题的左侧可能会有一个图标。我希望浮动标题仅在用户在页面上滚动时可见,因此在他停止时消失,而图标始终保持可见。那可能吗?
对于单页布局网站,我需要当前部分的标题显示在屏幕左侧的固定位置,以便向用户显示他当前所在的位置。
标题的左侧可能会有一个图标。我希望浮动标题仅在用户在页面上滚动时可见,因此在他停止时消失,而图标始终保持可见。那可能吗?
这是可能的,并且最容易在 JQuery 中完成。在 CSS 中使用
position: fixed;
将允许您定位一个元素,然后它会粘在屏幕上的位置,而不管用户向上和向下滚动页面。使用这个 JQuery 代码:
$(window).scroll(function(){
}
将检测用户何时滚动然后将运行函数内部的任何内容。如果你把它放在函数里面:
$("#scrollerbar").css({"display": "block"});
clearTimeout($.data(this, 'scrollTimeout'));
$.data(this, 'scrollTimeout', setTimeout(function() {
$("#scrollerbar").css({"display": "none"});
}, 250));
使用此 HTML:
<div id="scrollerbar">You're scrolling</div>
以及以下 CSS:
#scrollerbar{
display: none;
position: fixed;
top: 50px;
left: 0;
}
这将创建 div 滚动条并将其放置在页面下方 50px 处,并将其设置为不可见。然后每当用户滚动时,它会将滚动条设置为 display: block (使其可见)。然后停止超时“scrollTimeout”(如果它正在运行)。然后创建超时“scrollTimeout”,等待 250 毫秒,然后再次将滚动条设置为不可见。
这是一个 JSFiddle:http: //jsfiddle.net/Xanco/5q6oq8tm/
如果您有任何问题,请与我联系。
编辑
为了回答您问题的第一部分,我更新了 JSFiddle:http: //jsfiddle.net/Xanco/5q6oq8tm/2/
滚动条包含一组列表项,每个将绑定到一个 div:
<li id="1read">Reading 1</li>
<li id="2read">Reading 2</li>
<li id="3read">Reading 3</li>
<li id="4read">Reading 4</li>
还有一个新的类名:
.active{
font-weight: bold;
}
我创建了一个函数,它将从滚动条的列表项中删除所有“活动”类名:
function removeActive(){
$("#1read").removeClass("active");
$("#2read").removeClass("active");
$("#3read").removeClass("active");
$("#4read").removeClass("active");
}
现在,每当用户滚动时,JavaScript 都会检查用户当前正在阅读的内容,并将“活动”类添加到滚动条中适当的列表项中:
if ($("#1").is(":hover")) {
removeActive();
$("#1read").addClass("active");
}
if ($("#2").is(":hover")) {
removeActive();
$("#2read").addClass("active");
}
if ($("#3").is(":hover")) {
removeActive();
$("#3read").addClass("active");
}
if ($("#4").is(":hover")) {
removeActive();
$("#4read").addClass("active");
}
编辑 2
现在,JavaScript 将采用 ID 为“articleheader”的悬停 div 的子项的 innerText,而不是使用非标准属性,如下行代码所示:
$("#displayaArticleName").text($(this).children("#articleheader")[0].innerText);
这是 JSfiddle:http: //jsfiddle.net/5q6oq8tm/6/
请注意,没有一组只能使用的属性,您可以使用自定义属性,如下所示:http: //jsfiddle.net/5q6oq8tm/4/