Я создаю макет, рекламирующий продукт, а функции продукта находятся в панели div, которая занимает полную ширину браузера.
Я хочу, чтобы пользователь прокручивал, div в центре экрана меняет цвет фона с белого на светло-серый, чтобы сосредоточиться на этой функции. Затем вернитесь к белому, когда пользователь продолжит следующую функцию. Пример:
Я достигаю этого с помощью jquery scrollTop(), чтобы найти положение прокрутки, а затем установить, какая функция должна быть подсвечена в зависимости от вашей позиции прокрутки. Проблема заключается в том, что размер браузера изменяется, разница в размерах разделяет высоту, а позиция прокрутки, установленная в макс. Ширине, не работает! Ниже приведен соответствующий coffeescript, который я использую для генерации переходов. Как я могу сделать эту работу независимо от размера экрана или браузера?
$(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"
Я понял. Поэтому я удалил все неприятные вызовы.css, которые @mu_is_too_short советовали мне, а затем работал с функцией, приведенной в этом примере:
Проверьте, свободен ли элемент после прокрутки
Вот мое решение coffeescript:
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")