Question

当锚点滚动到页面顶部时，我正试图让背景颜色淡化变化。

<div id="footer_wrap">
<div class="anchor-point"> </div>

#footer_wrap {
margin-top: 200px;
height: 130vmax;
background-color: #f4f4f4;
opacity: 1;
transition-delay: 0s;
transition: ease-in-out .3s
}

#footer_wrap.topper {
transition: visibility 0s ease-in-out 0.3s, opacity 0.3s ease-in-out;
opacity: 0;
background-color: #000;
visibility: hidden
}


var scrollFn = function() {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".#footer_wrap").addClass("topper");
} else {
$(this).find("#footer_wrap").removeClass("topper");
}
};

https://jsfiddle.net/t6tyjbz5/

Answer 1

我搞砸了一下，让这个jquery工作......

$(window).scroll(function() {

    var targetOffset = $(".anchor-point")[0].offsetTop;

    if ($(window).scrollTop() > targetOffset) {

        $("#footer_wrap").addClass("topper");

    } else {

        $("#footer_wrap").removeClass("topper");

    }
});

在原始代码中，您从未收听滚动事件$(window).scroll()，因此您的函数从未被调用过。同样，我删除了$(this)和.find，因为在此上下文中它们是不必要的。使用$(window)而不是$(this)更有意义，因为我们正在侦听整个文档的滚动值。或者，如果您计划在另一个要滚动的div中使用它，那么您将使用该父div的选择器代替$(window)。

如果您只是想淡化背景，那么你的CSS会更像这样。

#footer_wrap {
    margin-top: 200px;
    height: 130vmax;
    background: #f4f4f4;
    transition: background 1s ease-in-out;
}

#footer_wrap.topper {
    background: #000;
    transition: background 1s ease-in-out;
}

Answer 2

您的代码存在一些问题：

您从未将滚动功能分配给窗口滚动事件
语法错误/非功能（行：2＆amp; 5）
您使用$（this）的方式不正确。事实上，$（this）从未被设置，因为它没有被分配，当它被分配时它会引用窗口。

更正了Javascript：

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
   return options.count
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
   let option = options[indexPath.row]!
   let cell = tableView.dequeueReusableCellWithIdentifier(option.identifier, forIndexPath: indexPath)

   (cell as! CellDescrptionConfigurable).cellDescription = option
   (option as? ExpandCellInformer)?.delegate = self
   return cell
}

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    guard let option = options[indexPath.row] else { return }
    guard let expandableOption = option as? ExpandableOption else { return }
    if expandableOption.identifier == "ExpandableCell" {
        expandableOption.active = !expandableOption.active
    }
}

func expandableCell(expandableCell: ExpandableCellDescriptor, didChangeActive active: Bool) {
    guard let index = options.indexOf(expandableCell) else { return }
    var indexPaths = [NSIndexPath]()
    for row in 1..<expandableCell.countIfActive {
        indexPaths.append(NSIndexPath(forRow: index + row, inSection: 0))
    }
    if active {
        tableView.insertRowsAtIndexPaths(indexPaths, withRowAnimation: UITableViewRowAnimation.Fade)
    } else {
        tableView.deleteRowsAtIndexPaths(indexPaths, withRowAnimation: UITableViewRowAnimation.Fade)
    }
}

另外，如果你想改变背景颜色，css会更简单：

function scrollFn() {

  var targetOffset = $(".anchor-point").offset().top;
  var w = $(window).scrollTop();

  if (w > targetOffset) {
    $("#footer_wrap").addClass("topper");
  } else {
    $("#footer_wrap").removeClass("topper");
  }
};
$(window).on('scroll', scrollFn);

工作小提琴：https://jsfiddle.net/t6tyjbz5/5/

当锚到达页面顶部时，获取div的背景颜色以淡入不同的颜色

2 个答案: