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

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

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

enter image description here

Я достигнуть этого с помощью 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"

источник

2013-11-14 nearpoint

Вы можете проверить это ссылка. Я думаю, это поможет вам. http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling/488073#488073 –

Это довольно удивительная функция в этой ссылке. Это приближает меня, но я все еще теряюсь на том, как я буду реализовывать его, чтобы сделать эту работу? – nearpoint

Прежде всего, все эти вызовы '.css' противны, вы должны просто использовать« не выделенный »CSS-класс и« выделенный »класс CSS. Затем объедините простые вызовы 'addClass' /' removeClass' с большей частью логики в связанном ответе. –

Я понял. Так что я удалил все неприятные звонки .css, которые @mu_is_too_short советовали мне, а затем работал с функцией, задаваемой в этом примере:

Check if element is visible after scrolling

Вот мое 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")

источник

2013-11-14 20:19:52 nearpoint

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

ответ

Смежные вопросы