Question

我正在尝试将标签添加到我的网站标题中，然后更改滚动中的文字内容，以便div的文本内容与页面上的部分匹配。即使我是JS的新手，我实际上还是使用了以下代码：

JS：

<script>
jQuery( ".menu-column" ).append( "<p>ABOUT</p>" );
</script>

-

<script>
jQuery( document ).ready(function() {
   jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()>530)
     {
        jQuery('.menu-column p').html("ABOUT");
     }
 });
});
</script>

-

<script>
jQuery( document ).ready(function() {
   jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()>1450)
     {
        jQuery('.menu-column p').html("CS17");
     }
 });
});
</script>

-

<script>
jQuery( document ).ready(function() {
   jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()>2300)
     {
        jQuery('.menu-column p').html("ABYF");
     }
 });
});
</script>

-

注意： 我知道像这样分离JS代码部分并不是在页面中包含JS的最佳方式。 < / p>

-

CSS：

.menu-column p {
    margin-left: 30px;
    margin-top: 10px;
    width: 200px;
    padding: 10px 10px 10px 10px;
    display: none;
    float: left;
    font-size: 11px;
    color: #a7a7a7;
    transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -o-transition: 0.3s all;
    -ms-transition: 0.3s all;
}
@media screen and (max-width: 768px) {
.menu-column p {
    display: none!important;
}
}

.menu-items-blocks {
    float: right!important;
}

.menu-bar {
    margin-top: 8px;
}

我的问题：

这适用于15“Macbook Pro（在此设备上设计），但当我稍微调整浏览器大小时，我的所有滚动位置都被”破坏“（即脱节） - 我认为这是因为我需要一些可变参数的形式或者这可能不是实现此功能的正确方法。

我试图改编其他答案，但我无法得到任何工作，有人能指出我正确的方向吗？

使.scrollTop适用于所有屏幕尺寸（jQuery）

0 个答案: