CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aaron Benjamin
Aaron Benjamin

Reputation: 1389

jQuery - Reduce margin on scroll

I need to reduce the margin on .logo-box and the opacity on .frame until the top of .logo-boxmeets .main-nav (the space between the two would be 0) while the user is scrolling down.

enter image description here

Instead, the page seems to be growing and turning to black rather than the opacity gradually decreasing.

PEN: http://codepen.io/abenjamin/pen/LNWwXG

HTML

<header class="page-header">
  <div id="collapse" class="frame">
    <nav class="main-nav container">
      <ul>
        <li><a href="#" class="active">Stuff</a></li>
        <li><a href="#">Explore</a></li>
        <li><a href="#">Activity</a></li>
        <li><a href="#">Messages</a></li>
        <li><a href="#">Help</a></li>
      </ul>
      <div class="user"><span class="name">Aaron Benjamin</span><span class="avatar"></span></div>
    </nav>
    <div class="logo-box container">                            
      <div class="logo">
        <h1>Things!</h1>
        <div class="drop-down">My Stuff</div>
      </div><a href="#" title="New Thing" class="fab">+</a>
    </div>
  </div>
</header>
<div class="utils"></div>

CSS

body {
  font-family: "Open Sans", arial, sans-serif;
  position: relative;
}

.clear {
  clear: both;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

.sticky {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
}

.page-header {
  background-image: url("https://static.pexels.com/photos/26372/pexels-photo.jpg");
  background-position: bottom center;
  background-size: cover;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.page-header .frame {
  background: rgba(0, 0, 0, 0.4);
}
.page-header .main-nav {
  padding: 10px 0;
  font-size: 12px;
  color: white;
  line-height: 28px;
  overflow: hidden;
}
.page-header .main-nav ul {
  float: left;
}
.page-header .main-nav ul li {
  display: inline-block;
}
.page-header .main-nav ul li a {
  display: block;
  color: white;
  text-decoration: none;
  opacity: 0.5;
}
.page-header .main-nav ul li a:hover {
  opacity: 1;
}
.page-header .main-nav ul li .active {
  opacity: 1;
}
.page-header .main-nav ul li + li {
  margin-left: 15px;
}
.page-header .main-nav .user {
  float: right;
}
.page-header .main-nav .user span {
  display: block;
  float: left;
}
.page-header .main-nav .user .avatar {
  height: 30px;
  width: 30px;
  background: pink;
  border-radius: 50%;
  margin-left: 10px;
}
.page-header .logo-box {
  margin-top: 300px;
  position: relative;
}
.page-header .logo {
  padding: 20px 0;
  clear: both;
  position: relative;
  overflow: hidden;
}
.page-header .logo h1 {
  float: left;
  background-image: url("/assets/img/studio_logo.png");
  background-size: contain;
  height: 50px;
  width: 209px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.page-header .logo .drop-down {
  float: left;
  color: white;
  margin-left: 15px;
  border-left: solid 1px rgba(255, 255, 255, 0.3);
  padding-left: 15px;
  line-height: 50px;
}
.page-header .fab {
  position: absolute;
  bottom: -33px;
  right: 0;
  background: pink;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  clear: both;
  text-align: center;
  line-height: 70px;
  text-decoration: none;
  color: white;
  font-size: 40px;
}

.utils {
  height: 2000px;
}

JS

$(window).scroll(function(){
    var fromTop = $(window).scrollTop(),
        space   = $('.logo-box').offset().top - $('.main-nav').offset().top,
        alpha   = 1;

        if (space > 0) {
            $(".logo-box").css('margin', + (space - 1) + 'px auto 0 auto');
            $(".frame").css('background-color', 'rgba(0,0,0,' + (alpha + 0.1) + ')');
        } 
        console.log(space);
});

Upvotes: 0

Views: 1351

Answers (1)

Dehli
Dehli

Reputation: 5960

Using this code seems to accomplish what you desire.

$(window).scroll(function() {
    var requiredOffset = 300;

    // Between 0 and 1 (inclusive)
    var percentage = Math.min(1, $(window).scrollTop() / requiredOffset);

    // Starts at requiredOffset and goes down to 0        
    var marginTop = requiredOffset * (1 - percentage);

    // Opacity of frame
    var alpha = percentage;

    $(".logo-box").css('margin-top', marginTop);
    $(".frame").css('background-color', 'rgba(0,0,0,' + alpha + ')');
});

Here's my forked pen: http://codepen.io/dehli/pen/GZmKJO

Upvotes: 3

Related Questions