Question

我实际上在网站上工作，我想添加一些更改。我告诉你，我是编码的初学者。

当它位于网站的不同部分时，目的是更改为滚动菜单的背景颜色（主页，关于我们，...在底部图片的链接上）（黑色到白色，白色到黑色.. ）。

让我们了解A部分：我在网站上有一个“标签”，您可以选择4个选项（底部图片链接上的test1 / 2/3/4）。对于每个选项，您将显示4个包。由于您必须选择您想要的选项，因此隐藏了其他3个选项。

在此“标签”下方，您还有该网站的其他部分：B部分

当您在A部分时，滚动菜单实际上显示为白色，我希望它在叠加B部分时变为黑色。

我想用Jquery做这件事并且有效。唯一的问题是我为颜色变化设置了一个固定的位置，因为我可以得到B部分顶部的真实位置。的确，我试图以多种方式解决它，但没有一个工作..

我使用Jquery函数作为.position（）,. offset（）......它们中的每一个都返回一个错误的位置：它返回B部分的位置，但考虑到A部分是4个选项，一个在另一个之下。 .. B部分顶部的.offset（）将返回2700px（test1 + 2+ +3 +4），但它应该是700px（选项test1）。

这可能不太清楚，下面的图片可以帮助您理解我的问题。我可以找到一些代码来帮助您理解。

提前感谢您的考虑！

<div class="wrap medium">
    <div class="left size-3 responsive">
        <h3>
            <a class="txt-sm btn fast" href="#test1" data-ref="1-1">TEST1</a>
        </h3>
    </div>
    <div class="left size-3 responsive">
        <h3>
            <a class="txt-sm btn fast" href="#test2" data-ref="1-4" >TEST2</a>
        </h3>
    </div>
    <div class="left size-3 responsive">
        <h3>
            <a class="txt-sm btn fast" href="#test3" data-ref="1-3">TEST3</a>
        </h3>
    </div>
    <div class="left size-3 responsive">
        <h3>
            <a class="txt-sm btn fast" href="#test4" data-ref="1-6">TEST4</a>
        </h3>
    </div>
    <div class="clear"></div>
</div>
<div class="wrap large">
     <div class="left size-3 responsive" data-tab="1-1">
          <div class="column">
               <div class="row-dark">
                    <p class="txt-xl">Package <b>1</b></p>
               </div>
               <div class="row-light">
                    <p class="txt-xs">test</p>
               </div>
               <div class="row-dark">
                    <p class="txt-xs">-</p>
               </div>
               <div class="row-light">
                    <p class="txt-xs">-</p>
               </div>
               <div class="row-dark">
                    <p class="txt-xs"><b>3000</b>  *</p>
               </div>
               <div class="row-light">
                    <a class="button border fast" href="/1">Start </a>
               </div>
        </div>
    </div>
</div>

这是在滚动菜单上进行更改的javascript。我希望它从A部分的乞讨到A部分结束时都是白色的。在此之前和之后，我应该是黑色的。

如您所见，$ startchange是A部分的乞讨，$ endchange是B部分的开头。这个循环应该改变颜色：

if（（scroll_start＆gt; offset.top-menuSize）＆amp;＆amp;（scroll_start＆lt; 1320））

正如你所看到的，scroll_start受限于1320，但它是一个固定值...... 如果我尝试类似：var endchange = $（'＃testi'）。offset（）。top;它将返回2700，因为它考虑到A部分的4个选项是一个低于另一个。

<script type="text/javascript">
$(function () {
    $(window).on("load resize", function (event) {
        $("#menu").unstick().width("100%").height("auto").sticky();
    });
    var scroll_start = 0;
    var startchange = $('#pack');
    var endchange = $('#testi');
    var menuSize = $('#menu').height();
    var offset = startchange.offset();

    if (startchange.length){
        $(document).scroll(function() {
            scroll_start = $(this).scrollTop();
            if((scroll_start > offset.top-menuSize) && (scroll_start < 1320)) 
            {
                $("#menu").css('background', '#eeeeee');
                $("#menu .content .wrap .txt-sm").css('color', '#222222');
                $("#menu .content .wrap .btn").css('background', 'rgba(0, 0, 0, 0.00)');
                $("#menu .content .wrap .btn:hover").css('background', 'rgba(0, 0, 0, 0.00)');
            } else {
                $("#menu").css('background', '#222222');
                $("#menu .content .wrap .txt-sm").css('color', '#ffffff');
                $("#menu .content .wrap .btn").css('background', 'rgba(0, 0, 0, 0.00)');
                $("#menu .content .wrap .btn:hover").css('background', 'rgba(0, 0, 0, 1.00)');
            }
        });
    }
});
</script>

如何在选项卡后获得div位置

0 个答案: