0

我正在创建一个广告产品的布局，产品的功能位于占据浏览器全宽的 div 栏内。

我希望它在用户滚动时，屏幕中心的 div 将背景颜色从白色更改为浅灰色，以便专注于该功能。然后在用户继续下一个功能时返回白色。例子：

在此处输入图像描述

我使用 jquery scrollTop() 来找到滚动位置，然后根据您的滚动位置设置应突出显示的功能。问题是当浏览器调整大小时，功能 div 会改变高度，而我设置为最大宽度的滚动位置不起作用！下面是我用来生成转换的相关咖啡脚本。无论屏幕或浏览器大小如何，我怎样才能使这项工作？

$(document).ready ->
  scroll_pos = 0
  $(document).scroll ->
    scroll_pos = $(this).scrollTop()
    scrollBottom = $(window).scrollTop() + $(window).height()

    if scroll_pos < 300
      $("#featureOne").css "background-color", "white"
      $("#featureOne").css "-webkit-box-shadow", "none"
    else if scroll_pos > 300 and scroll_pos < 730
      $("#featureOne").css "background-color", "#eee"
      $("#featureOne").css "-webkit-box-shadow", "0px 5px 15px 5px #eee"
      $("#featureTwo").css "background-color", "white"
      $("#featureTwo").css "-webkit-box-shadow", "none"
    else if scroll_pos > 730 and scroll_pos < 1150
      $("#featureOne").css "background-color", "white"
      $("#featureOne").css "-webkit-box-shadow", "none"
      $("#featureTwo").css "background-color", "#eee"
      $("#featureTwo").css "-webkit-box-shadow", "0px 5px 15px 5px #eee"
      $("#featureThree").css "background-color", "white"
      $("#featureThree").css "-webkit-box-shadow", "none"
    else if scroll_pos > 1150 and scroll_pos < 1700
      $("#featureTwo").css "background-color", "white"
      $("#featureTwo").css "-webkit-box-shadow", "none"
      $("#featureThree").css "background-color", "#eee"
      $("#featureThree").css "-webkit-box-shadow", "0px 5px 15px 5px #eee"
      $("#featureFour").css "background-color", "white"
      $("#featureFour").css "-webkit-box-shadow", "none"
    else if scroll_pos > 1700 and scroll_pos < 2050
      $("#featureThree").css "background-color", "white"
      $("#featureThree").css "-webkit-box-shadow", "none"
      $("#featureFour").css "background-color", "#eee"
      $("#featureFour").css "-webkit-box-shadow", "0px 5px 15px 5px #eee"
      $("#featureFive").css "background-color", "white"
      $("#featureFive").css "-webkit-box-shadow", "none"
    else if scroll_pos > 2050 and scroll_pos < 2450
      $("#featureFour").css "background-color", "white"
      $("#featureFour").css "-webkit-box-shadow", "none"
      $("#featureFive").css "background-color", "#eee"
      $("#featureFive").css "-webkit-box-shadow", "0px 5px 15px 5px #eee"
      $("#featureSix").css "background-color", "white"
      $("#featureSix").css "-webkit-box-shadow", "none"
    else if scroll_pos > 2450 and scroll_pos < 2810
      $("#featureFive").css "background-color", "white"
      $("#featureFive").css "-webkit-box-shadow", "none"
      $("#featureSix").css "background-color", "#eee"
      $("#featureSix").css "-webkit-box-shadow", "0px 5px 15px 5px #eee"
4

1 回答 1

0

我想到了。所以我删除了@mu_is_too_short 建议我的所有讨厌的 .css 调用，然后使用此示例中给出的函数：

检查滚动后元素是否可见

这是我的咖啡脚本解决方案：

isScrolledIntoView = (elem) ->
  console.log(elem)
  docViewTop = $(window).scrollTop()
  docViewBottom = docViewTop + $(window).height()
  elemTop = $(elem).offset().top
  elemBottom = elemTop + $(elem).height()
  console.log("elemBottom: " + elemBottom + " docViewBottom: " + docViewBottom + " elemTop: " + elemTop + " docViewTop: " + docViewTop)
  ((elemBottom <= (docViewBottom - 300)) && (elemTop >= (docViewTop)))


shouldHighlight = (elem) ->
  if isScrolledIntoView(elem)
      $(elem).addClass "addHighlight" 
      console.log('test')
    else 
      $(elem).removeClass "addHighlight"


$(document).ready ->
  scroll_pos = 0
  $(document).scroll ->
    scroll_pos = $(this).scrollTop()
    scrollBottom = $(window).scrollTop() + $(window).height()

    shouldHighlight("#featureOne")
    shouldHighlight("#featureTwo")
    shouldHighlight("#featureThree")
    shouldHighlight("#featureFour")
    shouldHighlight("#featureFive")
    shouldHighlight("#featureSix")
    shouldHighlight("#featureSeven")
于 2013-11-14T20:19:52.810 回答