Question

我有以下代码，当用户滚动时，它会向我的导航div添加/删除一个类。

 setInterval(function() {
  if (didScroll) {
  hasScrolled();
  didScroll = false;
}
}, 100);

function hasScrolled() {
    if ($(window).width() > 768) {
        var st = $(this).scrollTop();
        if (Math.abs(lastScrollTop - st) <= delta) {
            return;
        }
        if (st > lastScrollTop && lastScrollTop >= 0 && st > 0) {
            $('#anim-nav').removeClass('nav-down').addClass('nav-up');

        } else {
            $('#anim-nav').removeClass('nav-up').addClass('nav-down');

        }
    }
    lastScrollTop = st;
}

});

当用户靠近屏幕顶部时，我想将.trans-bg添加到＃anim-nav。它有一个白色的背景，但是当它到达屏幕的顶部时，我希望它在透过图像时是透明的。但是，当我添加它到这个功能是不可靠的。有时它会保持透明，或者不变透明。

不确定如何添加不断运行的内容以确保用户是否接近/应用于顶部。

Answer 1

也许这会有所帮助？

.PhpStorm2017.3/config/jdbc-drivers

$(window).on('scroll', function () {
  if ($(window).scrollTop() > 10) {
    $('body').addClass('scrolled');
  } else {
    $('body').removeClass('scrolled');
  }
});

body {
  background: url("https://www.toptal.com/designers/subtlepatterns/patterns/christmas-black.png");
  height: 3000px;
}

.scrolled .header {
  background-color: rgba(255, 255, 255, .8)
}

.header {
  background-color: #fff;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: .2s;
}

Answer 2

解决方案：收听滚动更改，而不是每隔一段时间检查滚动。

使用javaScript在顶部监听滚动的示例：

driver.findElement(By.name("login")).click();  //Click on login button
    System.out.println("hello world-----4");

    try {
        Thread.sleep(5000);
    } catch (InterruptedException e) {

        e.printStackTrace();
    }   
    System.out.println("hello world-----5");
    WebElement element = driver.findElement(By.xpath("//*
[@id=\"modeuser\"]/div/ul/li[3]"));
    ((JavascriptExecutor) 
driver).executeScript("arguments[0].scrollIntoView(true);", element);
    element.click();                                                                                    
//Click on usertype



Error:-  

Exception in thread "main" 
org.openqa.selenium.ElementNotInteractableException: Element <li 
class="buyer_border changeusermode "> could not be scrolled into view
Build info: version: '3.9.0', revision: '698b3178f0', time: '2018-02-
05T14:56:13.134Z'
System info: host: 'CLAVAX-PC-93', ip: '192.168.2.122', os.name: 'Windows 
10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_161'
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities {acceptInsecureCerts: true, browserName: firefox, 
browserVersion: 58.0.2, javascriptEnabled: true, moz:accessibilityChecks: 
false, moz:headless: false, moz:processID: 14260, moz:profile: 
C:\Users\Rahul\AppData\Loca..., moz:webdriverClick: true, pageLoadStrategy: 
normal, platform: XP, platformName: XP, platformVersion: 10.0, rotatable: 
false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}}


HTML is :- 

<div class="right hide-on-med-and-down head_right_mar" id="modeuser">
               <!--  <div class="toggleWrapper">
                  <input class="dn" type="checkbox" id="dn" value="1"/>
                  <label class="toggle" for="dn"><span class="toggle__handler"></span></label>
                </div> -->

                <div class="right_toggle">
                                            <ul>
                        <li data-get="seller" class="changeusermode active">
                            <span>Seller</span>
                                                                <span class="nav_span">On</span>

                        </li>


                        <li class="mid_toggle">  
                            <div class="switch">
                            <label>

                              <input class="changeusermode_btn" type="checkbox" data-on="Yes" data-off="No">
                              <span class="lever"></span>
                            </label>
                          </div>
                        </li>


                        <li data-get="buyer" class="buyer_border changeusermode ">
                            <span>Buyer</span>

                                <span class="nav_span">Off</span>                                     

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


            </div>

页面顶部的透明导航

2 个答案: