Question

对于单页布局网站，我需要当前部分的标题显示在屏幕左侧的固定位置，以便向用户显示他当前所在的位置。

标题左侧可能有一个图标。我想浮动标题仅在用户在页面上滚动时才可见，因此当他停止时消失，而图标始终保持可见。这可能吗？

Answer 1

这是可能的，并且最容易在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（使其可见）。然后停止超时＆＃34; scrollTimeout＆＃34; （如果它正在运行）。然后创建超时＆＃34; scrollTimeout＆＃34;什么等待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; }

我已经创建了一个功能，可以删除所有＆＃34; active＆＃34;滚动条中列表项的类名：

function removeActive(){ $("#1read").removeClass("active"); $("#2read").removeClass("active"); $("#3read").removeClass("active"); $("#4read").removeClass("active"); }

现在，只要用户滚动，JavaScript就会检查用户当前正在阅读的内容并添加＆＃34; active＆＃34; class到滚动条中的相应列表项：

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＆＃34; articleheader＆＃34;来获取悬停div的子项的innerText。而不是使用非标准属性，如此行代码所示：

$("#displayaArticleName").text($(this).children("#articleheader")[0].innerText);

这是JSfiddle：http://jsfiddle.net/5q6oq8tm/6/

请注意，没有一组属性只能使用，您可以使用自定义属性，如下所示：http://jsfiddle.net/5q6oq8tm/4/

显示当前部分的标题位于侧面的固定位置

1 个答案: