Question

我有一个粘性导航，我希望在用户滚过图像滑块后激活白色的背景颜色 - 基本上我希望导航的白色背景出现在橙色徽标部分。目前我通过班级＆＃34; .getsticky＆＃34;在特定点调用导航的白色背景。用jquery。该类正在应用于橙色徽标部分，但由于图像滑块调用隐藏图像，导航背景显示在图像滑块上方而不是橙色徽标部分。我尝试在jquery事件上放置负像素偏移，但问题是我构建了一个基于百分比的响应式网站，因此像素偏移量并不适用于所有不同的浏览器大小。任何关于如何纠正这一点的想法都会很棒！

谢谢！

如果你想看到这个在行动。这是我正在http://www.schipperbros.com

工作的网站在下面的

中，您可以看到用于调用背景颜色的jquery以及＆＃34; .getsticky＆＃34; class在HTML中应用

$(document).ready(function(){  
    if ( $(window).width() > 769) {     
       var scroll_start = 0;
       var startchange = $('.getsticky');
       var offset = startchange.offset();
       $(document).scroll(function() { 
          scroll_start = $(this).scrollTop() + 0;
          // scroll_start = $(this).scrollTop();
          if(scroll_start > offset.top) {
              $('.main-nav').css('background-color','rgba(255,255,255,0.8)');
           } else {
              $('.main-nav').css('background-color', 'transparent');
           }
       });
    }
 });









<div id="work" class="grid twelve work">
        <div class="container">
        <div class="flexslider">
            <ul class="slides">
                <li>
                    <a href="#"><img src="img/work/photo1.jpg" /></a>
                </li>

                <li>
                    <img src="img/work/photo2.jpg" />
                </li>

                <li>
                    <img src="img/work/photo3.jpg" />

                </li>
            </ul>
        </div>
        </div>
    </div>

    <section class="grid work-logos getsticky">
        <div class="container">
            <div class="grid twelve">                   
                <div>
                    <p>
                        Select clients from our collective experience.
                    </p>
                </div>
            </div>
            <div class="grid twelve logoSquare">
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/ibm_logo.svg" alt="IBM">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/google_logo.svg" alt="Google">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/aiga_logo.svg" alt="AIGA">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/obama_logo.svg" alt="Obama">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/espn_logo.svg" alt="ESPN">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/herman_logo.svg" alt="Herman">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/vaystays_logo.svg" alt="Vaystays">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/nd_logo.svg" alt="ND">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/sd_logo.svg" alt="SD">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/fuzzy_logo.svg" alt="Fuzzy">
                </div>
                <div class="grid threeDesktop threeTablet fourPhone six">
                    <img src="img/about/usaa_logo.svg" alt="USAA">
                </div>
            </div>
        </div>
    </section>

Answer 1

我认为jQuery在错误的时间获得了偏移值。

你可以在$(document).scroll内再次设置偏移量，它会起作用。新功能将是：

$(document).ready(function(){  
    if ( $(window).width() > 769) {     
       var scroll_start = 0;
       var startchange = $('.getsticky');
       var offset = startchange.offset();
       $(document).scroll(function() { 
          scroll_start = $(this).scrollTop() + 0;

          offset = startchange.offset(); // ADDED THIS LINE !!

          // scroll_start = $(this).scrollTop();
          if(scroll_start > offset.top) {
              $('.main-nav').css('background-color','rgba(255,255,255,0.8)');
           } else {
              $('.main-nav').css('background-color', 'transparent');
           }
       });
    }
 });

粘性导航的背景在图像滑块之后的右侧点不会激活

1 个答案: