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

Show current section's heading in a fixed position on side

本文关键字：前部 显示 标题 位置 侧面 定位      更新时间：2023-09-26

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

标题的左侧可能有一个图标。我希望浮动标题只在用户在页面上滚动时可见，因此当他停下来时消失，而图标一直保持可见。这可能吗?

这是可能的，并且在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毫秒，然后将scrollerbar设置为不可见。

这是一个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将检查用户当前正在阅读的内容，并将"active"类添加到滚动条中相应的列表项中:

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的子div的innerText，而不是使用非标准属性，如下行代码所示: 
$("#displayaArticleName").text($(this).children("#articleheader")[0].innerText);

这是jsfield: http://jsfiddle.net/5q6oq8tm/6/

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

相关文章：