Javascript 根据页面位置突出显示文本中的字符

我的网站上有一个文本，可以水平滚动页面。我试图用黑色突出显示大约8个字符，而其余的是灰色。但是这些字符在滚动时会有所不同，突出显示的部分应该保持不变

如果这没有任何意义，如果灰色是x，它应该看起来像这样：

xxxxx xpsum dolox xxx xxxxx
xxxx xxsum dolox sxx xxxx
xxx xxxum dolox六个xxxxx
xx xxxxm多洛克斯座椅xxxx xx

我试图在jQuery中完成这项工作，但我无法让它工作。我还想说我根本不是网页设计专家，所以我不知道我在做什么。不管怎样，我尝试了两种不同的方法，一种是说“在浏览底层div时更改文本的颜色”。另一种方法是根据滚动位置改变文本的颜色，但这里的问题是它采用整个div的滚动位置，而不是页面上的固定位置。目前两者都不起作用，示例如下：

---

如果有人对如何处理这个问题有任何想法，或者需要更多的澄清，请让我知道。非常感谢

我采用了Teemu的解决方案，并对其进行了一些修改：

重要的一点：代码在文本上方移动一个白色的DIV（

#灰色覆盖层

），使其透明。通过添加黑白像素，可以得到灰色。灰度由alpha通道确定（在

rgba（）函数中为0.7）

您需要指定一个高度，否则它看起来会很奇怪。我使用1.5em来确保它不会与
#bodytext
div的滚动条重叠

还要确保两个div的上/左位置相同

在实际代码中，可以使水平滚动条消失并使用JavaScript滚动

HTML

您需要在
#black
中显示与
#bodytext
中相同的内容，并同步其相对于
#bodytext
滚动的位置。这可以通过在
#black
周围使用额外的包装来实现。大概是这样的：

CSS:

HTML:


请注意，如果需要，还必须“计算”到
pos
克隆文本并将其设置为覆盖框的子项，然后将它们一起滚动：

$(function(){
    var $bodytext = $('#bodytext'),
        $clone = $bodytext.clone();         
    //copy the text and append it to #black:
    $clone.attr("id","clone").prependTo("#black");
    //scroll #clone with #bodytext:
    $bodytext.scroll(function(){
        $clone.scrollLeft($bodytext.scrollLeft());
    });
});

，顶部的高光div和半透明颜色？很好。出于某种原因，我认为这不管用，但确实管用。唯一有点恼人的是，它正好覆盖了角色，留下了半灰半黑，而我更喜欢角色在一点改变颜色。但我不知道是否有其他办法可以解决这个问题。谢谢你的建议！是的，这是你需要的一种否定。不过，有几个答案比我的“快速帮助”更能满足你的需要。如果你真的必须一个字符一个字符地改变颜色，这将需要更多的代码。
body {
    background: #ffffff;
    color: #000000;
    font-family: sans-serif;
    font-size: 200%;
}
#bodytext {
    top: 15%;
    width:200px;
    height: 2em;
    padding: 0;
    position:absolute;
    overflow-x:scroll;
    overflow-y:hidden;
    white-space: nowrap;
}

#grey-overlay {
    background-color: rgba(255, 255, 255, 0.7);
    width:40px;
    height: 1.5em;
    top:15%;
    position:fixed;
    z-index: 10;
}

#cover {
    top: 15%;
    height:50%;
    width: 120px;
    padding: 0;
    position:fixed;
    overflow-x: hidden;
    background-color: #D8D8D8;
}
#black {
    color: #000000;
    width:100%;
    height:100%;
    top:0px;
    left: 0px;
    position:absolute;
    white-space: nowrap;
    z-index: 10;
}
#bodytext {
    top: 15%;
    width:100%;
    height:85%;
    padding: 0;
    position:absolute;
    overflow-x:scroll;
    white-space: nowrap;
    color: #D8D8D8;
}

<div id="cover">
    <div id="black"></div>
</div>

$(document).ready(function () {
    var black = $('#black'),
        btext = $('#bodytext');
    black.text(btext.text()); // Clone the content
    btext.scroll(function () {
        var pos = btext.scrollLeft();
        black.css('left', -pos + 'px'); // Set the position to match #bodytext
    });
});

$(function(){
    var $bodytext = $('#bodytext'),
        $clone = $bodytext.clone();         
    //copy the text and append it to #black:
    $clone.attr("id","clone").prependTo("#black");
    //scroll #clone with #bodytext:
    $bodytext.scroll(function(){
        $clone.scrollLeft($bodytext.scrollLeft());
    });
});