Каков наилучший способ изменить цвет фона определенного элемента div при прокрутке?

0

Я создаю макет, рекламирующий продукт, а функции продукта находятся в панели div, которая занимает полную ширину браузера.

Я хочу, чтобы пользователь прокручивал, div в центре экрана меняет цвет фона с белого на светло-серый, чтобы сосредоточиться на этой функции. Затем вернитесь к белому, когда пользователь продолжит следующую функцию. Пример:

Изображение 174551

Я достигаю этого с помощью 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"
  • 0
    Вы можете проверить эту ссылку. Я думаю, что это поможет вам. stackoverflow.com/questions/487073/...
  • 0
    Это довольно классная функция в этой ссылке. Это приближает меня, но я все еще потерялся в том, как я реализовал бы это, чтобы сделать эту работу?
Показать ещё 4 комментария
Теги:
scroll
coffeescript
background-color

1 ответ

0
Лучший ответ

Я понял. Поэтому я удалил все неприятные вызовы.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")

Ещё вопросы

Сообщество Overcoder
Наверх
Меню