CODEWITHSUNDEEP
javascriptjquerycssscroll
Zack Reid
Zack Reid

Reputation: 127

Change position of elements on scrolling

I am wondering how I can change my logo when you scroll to a certain point in the page.

Here is the jsfiddle for the site http://jsfiddle.net/zackreid/no7e4yng/

I have a feeling that it is going to be something to do with JavaScript.

The reason I am asking for this is because when you scroll to a certain point the logo blends in with the background. What you are seeing is actually not the logo/ background but just merely a place holder as the links broke.

You can still find the original name for the div the have just been commented out for the time being.

CSS- /* This Resets All Styles */

* {
    hight: 100%;
    margin: 0;
    padding: 0;
}


/*layout*/

p {
    line-height: 1.2em;
    margin-bottom: 10px;
}

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    color: ;
    font-size: 55px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}

h2 {
    color: ;
    font-size: 40px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}

h3 {
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    margin: 5px 0;
    padding: 20px;
    position: inherit;
    text-align: center;
    z-index: 1;
}

/*boards*/

#board_1, #board_2, #boar_3, #board_4 {
    width: 100%;
}

.board_1 {
    background: url(../img/background_5.png);
    background-image: min-height: 750px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 1020px;
    margin: 0 auto;
}

.p 

{
    color: white;
    font-size: 3em;
    max-width: 600px;
    padding-left: 55%;
    padding-top: 28%;
}

.logo
{
 position: fixed;
 margin-top: -3px;
}

.nav

{
    width: 100%; 
    height: 85px;
    background-color: black;
     opacity: 0.7;
    position: fixed;
    margin-top: 0px; 
}

.ul
{
  color: white;
  font-size: 1.5em;
  float: right;
  padding-top: 30px;
  padding-right: 40px;
  text-decoration: none;

}

 nav ul li
            {
             display: inline;
             margin: 10px;

            }


a:link {
    color: white;
    text-decoration: none;

}

a:hover {
    color: white;
    opacity: 0.7;
}

a:visited {
    color: white;
}

.board_2 {
    background-color: white;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 1000px;
}

.about
{
 font-size: 5em;
 padding-top: 7%;
 padding-left: 40%;
}

.hi
{
 width: 500px;
 font-size: 2em;  
 padding-top: 5%;
 padding-left: 60%;
}

.passion
{
 width: 500px;
 font-size: 2em;
 padding-top: 5%;
 padding-left: 60%;
}

.board_3 {
    background-color: white;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 1000px;
}

.work
{
 font-size: 5em;
 padding-top: 7%;
 padding-right: 70%;   
}

.selection
{
 width: 500px;
 font-size: 2em;
 padding-top: 10%;
 padding-left: 10%;
}


.container 
{
  overflow-y: auto;
  padding-left: 40%;
  margin-top: -16%;
}
.container > div 
{
  margin: 30px;
  width: 200px;
  height: 200px;
  background: blue;
  float: left;
  color: #fff;
  text-align: center;
}

.board_4 {
    background-color: black;
    color: #333333;
    height: 100%;
    margin: 0 auto;
    max-height: 1000px;
    min-height: 400px;
}

.contact
{
 color: white;
 padding-top: 4%;
}

.social a {
  opacity: 0.3;
  transition: opacity .25s ease-in-out;

}

.social a:hover {
  opacity: 0.8;
}

.social li {
  display: inline;
  margin: 2px;
  color: #444;
}

HTML-

<!DOCTYPE html>
<html>
<head>


    <link rel="stylesheet" href="css/main.css">


</head>

<body>
    <!--artical starts here-->

        <!--header which holds the nav and title-->

        <div class="board_1">

            <header id="main_header">


                <div class="content">



                    <nav class="nav">



                        <ul class="ul">
                            <li><a href="#board_1" title="Home">Home</a></li>
                            <li><a href="#board_2" title="About">About</a></li>
                            <li><a href="#board_3" title="Work">Work</a></li>
                            <li><a href="#board_4" title="Contact">Contact</a></li>
                        </ul>

                    </nav>

                </div>

                <div class="logo">
<img src="../img/logo_wb_1.png"></a>
                </div>
            </header>  

            <div class="p">
                <p>Hi, thats me over there. This is a my home well my Internet home, it has everything you want to know about me.</p>
            </div>


            <!--header ends-->
            </div>



            <div class="board_2">
                <h2 class="about"> About</h2>




                <p class="hi">Hi, my name is Zack Reid. I am in first year currently studying Interaction Design at The University Of Ulsture.</p>

                <p class="passion">I have a passion for many things which are design, music, drawing, typography, writing, photography, meditation and running. I hope that some day I will be able to say that my work has inspired someone and if I can do that, I will be a happy man.</p>

            </div>

            <div class="board_3">

                <h2 class="work">Work</h2>
                <p class="selection">Here is a selection of work I have done for my course and some I have done in my own time.</p>

 <div class="container">
   <div>Box1</div>
   <div>Box2</div>
   <div>Box3</div>
   <div>Box4</div>
   <div>Box5</div>
   <div>Box6</div>
   <div>Box7</div>
   <div>Box8</div>
</div>

            </div>

            <div class="board_4">

                <h2 class="contact">You can contact me below, if you have any questions.</h2>

                <div class="social">
        <ul>
            <li><a href="https://www.flickr.com/photos/117329603@N05/"><img src="" alt="Follow me on Flickr" /></a></li>
            <li><a href="#"><img src="images/social-icons/github.svg" alt="Follow me on GitHub" /></a></li>
            <li><a href="https://twitter.com/MrZackrox"><img src="images/social-icons/twitter.svg" alt="Follow me on Twitter" /></a></li>
            <li><a href="#"><img src="images/social-icons/link.svg" alt="View my website" /></a></li>
            <li><a href="#"><img src="images/social-icons/pinterest.svg" alt="Follow me on Pinterest" /></a></li>
            <li><a href="#"><img src="images/social-icons/vimeo.svg" alt="Subscribe to my channel on Vimeo" /></a></li>
        </ul>
    </div>

            </div>
</body>
</html>

Upvotes: 0

Views: 308

Answers (2)

nanndoj
nanndoj

Reputation: 6770

You can use jquery to watch the scroll position.

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
  var board_position = $('.board_2').offset().top;
  var logo = $('.logo');

  $(window).scroll(function () {
        var scroll = $(this).scrollTop();
        if (scroll >= board_position) {
            logo.addClass('logo-highlight');
        } else {
            logo.removeClass('logo-highlight');
        }
  });
</script>

in your css

.logo-highlight {
    color: #000 !important;
}

Upvotes: 1

owenmelbz
owenmelbz

Reputation: 6544

You'll need to monitor the scroll position of the page, and trigger some JS when you need to.

You can either roll your own version, or if your happy to use jQuery then you can either a WayPoint plugin, or a ScrollSpy Plugin.

If you do some googling for those keywords you'll most likely find something like

https://github.com/sxalexander/jquery-scrollspy

http://imakewebthings.com/waypoints/

These plugins will provide javascript callbacks that allow you to run code when they hit a waypoint, your code will be something like in jquery

$('.logo').addClass('inverted-colours');

then have a css class which has the new colouring that you want to apply.

Upvotes: 0

Related Questions