CODEWITHSUNDEEP
javascriptjqueryhtmlcss
dasdasd
dasdasd

Reputation: 107

On Scroll change color of menu HTML

First of all I'm as newbie in this area. I tried to search about this but nothing fits on what I want.

So I have this html:

<aside>
  <div align="center">
    <img src="images/teste.jpg" style="width:200px;height:200px;">
  </div>
  ...
  <div id="disciplinas">
     <h3>Disciplinas:</h3>
    <li><a href="#x">x</span></a></li>
    <li><a href="#y">y</span></a></li>
    <li><a href="#z">z</span></a></li>
    <li><a href="#w">w</span></a></li>
    <br/>
  </div>
</aside>

<div id="main">
<section id="x">
<div>
<img src="images/teste.jpg">
</div>
</section>

<section id="y">
<div>
<img src="images/teste.jpg">
</div>
</section>
...

I tried this code but didn't work:

        <script type="text/javascript">
$(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos > 210) {
                    $("li").css('background-color', 'blue');
                } else {
                    $("li").css('background-color', 'red');
                }
            });
        });
        </script>

I would like to know how can i change the color of the <li> on scroll, when they get to the correct section (or maybe i need to use a div instead). Thanks

If it helps, the css of div disciplinas and li:

#disciplinas {
    border: 1px solid;
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
    box-shadow: 10px 10px 5px #DCDCDC;
    background-color: white;
}

li {
    text-align: center;
  list-style-type: none;
}

Upvotes: 0

Views: 1316

Answers (3)

balaji thirumal
balaji thirumal

Reputation: 111

Try using this code,

$(window).scroll(function () {
    var scroll_pos= $(window).scrollTop();

  if(scroll_pos > 210) {
                    $("li").css('background-color', 'blue');
                } else {
                    $("li").css('background-color', 'red');
                }
});

hope it helps.

Upvotes: 2

felix91
felix91

Reputation: 462

Check this codepen: http://codepen.io/yuki-san/pen/eJqLNO

You can see the idea and how the sections are tied to the scrolling event. Now use that and just change the li background color instead of underline

Create a css class lets say - scrollColor and add it using jQuery

.addClass(".scrollColor")

when the window scrolled to the right place and remove it when scrolled away

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add jquery library js file

Remove unnecessary html tag 

    <aside>
  <div align="center">
    <img src="images/teste.jpg" style="width:200px;height:200px;">
  </div>
  ...
  <div id="disciplinas">
     <h3>Disciplinas:</h3>
    <li><a href="#x">x</a></li>
    <li><a href="#y">y</a></li>
    <li><a href="#z">z</a></li>
    <li><a href="#w">w</a></li>
    <br/>
  </div>
</aside>

<div id="main">
<section id="x">
<div>
<img src="images/teste.jpg">
</div>
</section>

<section id="y">
<div>
<img src="images/teste.jpg">
</div>
</section>

https://jsfiddle.net/rq6rgrcj/

Upvotes: 0

Related Questions