Question

我正在做一个粘性导航但是当我快速滚动它不起作用..只有当我慢慢滚动才能工作但不总是..

这是CSS：

div.sticky {
    position: fixed;
}

和Javascript：

     window.addEventListener("scroll", function() {
        var nav = document.getElementsByClassName("nav_lista")[0];
        if(window.scrollY > 200) {
            nav.className += " " + "sticky";
            nav.style.top = 0;
        } else if (window.scrollY < 200) {
            nav.classList.remove("sticky");
            nav.style.top = null;
        }
     });

知道bug可以在哪里吗？

谢谢！

Answer 1

我看到了您的代码存在以下问题：

您不处理class resultViewController: UITableViewController { var searchTerm: String? var movieArray = [MovieInfo]() override func viewDidLoad() { super.viewDidLoad() fetchAPI(search: searchTerm!) } func fetchAPI(search: String) { let gboxAPI = "rK5M0dCTUd268hk121BpNpEAxMOmFuNh" let URL = "http://api-public.guidebox.com/v1.43/US/\(gboxAPI)/search/movie/title/\(searchTerm!)/fuzzy" Alamofire.request(URL).responseObject { ( response: DataResponse<MovieResults>) in let result = response.result.value if let movies = result?.movieResults { for item in movies { self.movieArray.append(item) //this doesn't work print(item.movieTitle) //this works } } } /* This doesn't print anything for some reason my array isn't truly being popluated in the above fetchAPI call */ for item in movieArray { print(item.movieTitle) } } override func tableView(_ tablView: UITableView, numberOfRowsInSection section: Int) -> Int { return movieArray.count } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = UITableViewCell(style: .value1, reuseIdentifier: "UITableViewCell") let movieItem = movieArray[indexPath.row] cell.textLabel?.text = movieItem.movieTitle cell.detailTextLabel?.text = movieItem.movieRating return cell } }完全相同的情况到200.
你可以在js中设置window.scrollY css。
您使用style.top代替className +=。

我解决了上述所有问题，并且有效，如下所示：

classList.add()

window.addEventListener("scroll", function() {
  var nav = document.getElementsByTagName("nav")[0];
  nav.classList.toggle("sticky", window.scrollY > 200);
});

body {
  margin: 0;
}
nav {
  width: 100%;
  height: 200px;
  background-color: #99FFFF;
}
nav.sticky {
  position: fixed;
  top: 0;
}
main {
  background-color: #FF99FF;
  height: 200vh;
}

Answer 2

我没有看到你的问题...

我认为这是一个小提琴代表你的问题：https://jsfiddle.net/5gua3nto/2/ 同样的片段在这里：

＆＃13;

window.addEventListener("scroll", function() {
	var nav = document.getElementById("menu");
	if(window.scrollY > 500) {
		nav.className += " " + "sticky";
		nav.style.top = 0;
	} else if (window.scrollY < 500) {
		nav.classList.remove("sticky");
		nav.style.top = null;
	}
});

＆＃13;

    div.sticky {
    position: fixed;
}

#wrap{
  height: 8000px;
  background-color: black;
}

#menu
{
  background-color: red;
  height: 50px;
  width: 100%;
  z-index: 100;
}

body, html
{
  margin: 0;
  padding: 0;
}

＆＃13;

<div id="wrap">
<div id="menu">

</div>
</div>

＆＃13;

这个没有错误，至少在我的浏览器中没有。

用Javascript粘贴导航

2 个答案: