What is the best way to make the background color of a specific div in view change while scrolling?

Question

I am creating a layout advertising a product, and the features of the product are inside a div bar that takes up the full width of the browser.

I want it so as the user scrolls, the div in the center of the screen changes the background color from white to light gray, as to focus in on that one feature. Then return back to white as the user continues to the next feature. Example:

enter image description here

I achieve this using jquery scrollTop() to find the scroll position, then set which feature should be highlighted depending on your scroll position. The issue is when the browser is resized, the feature divs change height and the scroll position I set at max width do not work! Below is the relevant coffeescript I use to generate the transitions. How can I make this work no matter what screen or browser size?

$(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"

You can check this link. I think it would help you. http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling/488073#488073 — Exploring, Nov 14 '13 at 07:05
That is a pretty awesome function in that link. It is getting me closer but I am still lost on how I would implement it to make this work? — Nearpoint, Nov 14 '13 at 07:26
First of all, all those `.css` calls are nasty, you should just use a "not highlighted" CSS class and a "highlighted" CSS class. Then combine simple `addClass`/`removeClass` calls with most of the logic in the linked answer. — mu is too short, Nov 14 '13 at 15:58
Ah thanks got it! That is a much better solution. One thing I am confused about, how can I use the function linked in the earlier comment? I As the user scrolls how do I pass the elements into that function to see which is onscreen? — Nearpoint, Nov 14 '13 at 17:14
Ah well I figured it out myself! Combining the advice from mu is tooshort & @user2361994 I got it! I will paste my solution in the answer section — Nearpoint, Nov 14 '13 at 20:17
Just wanted to say thanks so much for the help user2361994 and mu is too short — Nearpoint, Nov 14 '13 at 20:58

score 0 · Accepted Answer · edited May 23 '17 at 12:20

I figured it out. So I removed all the nasty .css calls which @mu_is_too_short advised me and then worked with the function given in this example:

Check if element is visible after scrolling

Here is my coffeescript solution:

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")

What is the best way to make the background color of a specific div in view change while scrolling?

1 Answers1