Question

我有两个标题（menu1 - 默认，menu2 - display：none）。

在网站的各个部分，我添加了特殊属性（data-ix =“change-header”）。我希望有效果..如果我将滚动网站，如果我们在data-ix =“change-header”的部分滚动，那么标题将是其他 - 所以menu1将显示：none和menu2将显示：block ;

我有类似的东西，但我不知道如何使用滚动。

if ($(this).attr("data-ix") == "change-header"){
    $("‪#‎menu1‬").css("display","none");
    $("‪#‎menu2‬").css("display","block");
} else {
    $("#menu1").css("display","block");
    $("#menu2").css("display","none");
}

我的HTML看起来像这样：

<header id="menu1"></header>
<header id="menu2"></header>
<div class="test" data-ix="change-header"></div>
<div class="test"></div>
<div class="test" data-ix="change-header"></div>
<div class="test" data-ix="change-header"></div>
<div class="test" data-ix="change-header"></div>
<div class="test"></div>
<footer></footer>

帮助：）

Answer 1

您可以看一下：http://janpaepke.github.io/ScrollMagic/

它只有6Kb的gzip压缩，它允许你根据滚动位置动画元素或切换CSS类：）

Answer 2

您可以计算更改标题（或不更改标题）的阈值。像这样的东西

println(result.grantedPermissions)
println("fetched user = \(result)")
firstName = result.valueForKey("first_name")
println("firstName = \(firstName)")
lastName = result.valueForKey("last_name")
println("lastName is = \(lastName)")
email = result.valueForKey("email")
println("email is = \(email)")

然后，在每个滚动事件上查阅这些阈值

var thresholds = [];
$('.test').each(function(i, e) {
  // after we scroll past the top coordinate of this element,
  // either show or hide the second header, based on the presence
  // of the data-ix attribute
  thresholds.push([e.offsetTop, $(e).data('ix') === 'change-header']);
});

Here是一个有效的普通人。

如果元素在data-attribute上滚动则

2 个答案: