我正在创建一个广告产品的布局,该产品的功能位于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"
我想到了。因此,我删除了@mu_is_too_short建议我的所有讨厌的.css调用,然后使用此示例中给出的功能:
这是我的coffescript解决方案:
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")
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句