Boky Boky - 7 months ago 25
HTML Question

Fixed div on scroll

I'm trying to create a div which will get a class only on scrolling and when the value of scroll is 210. I have next code :

$(document).ready(function() {
var pageWidth = $(window).width();

if(pageWidth > 700){
var contentLeft = $('#content-left');
var height = 210;

$(window).scroll(function () {
if ($(window).scrollTop() < height) {
contentLeft.attr('class', 'content-left');
} else {
contentLeft.attr('class', 'content-left leftContentFixed');
}
});
}
});


I try to apply this only on desktops.
Thus, I do not need the class leftContentFixed if it's on a smartphone or tablet.

If I try something like :

$(document).ready(function() {
var pageWidth = $(window).width();

if(pageWidth > 700){
alert("Bigger than 700");
}else{
alert("Smaller than 700");
}
});


Than it works perfect, but with my code it isn't working. The class leftContentFixed is added although the screen is smaller than 700.

Any advice?

Answer

You need to check screen size on resize event and check for its value when user scrolls the page. You could create mobile variable and make it true/false depends on screen size, then in scroll callback check for its value and choose correct class.

$(document).ready(function() {
  var pageWidth = $(window).width(),
    height = 210,
    contentLeft = $('.content-left'),
    mobile = false;

  $(window).on('load resize', function() {
    pageWidth = $(this).width();
    // Save mobile status
    if (pageWidth > 700) {
      mobile = false;
    } else {
      mobile = true
    }
  })

  $(window).on('scroll', function() {
    if ($(window).scrollTop() > height) {
      // Set default class
      var _class = 'content-left leftContentFixed';
      // If mobile then modify class
      if (mobile) {
        _class = 'content-left';
      }
      contentLeft.attr('class', _class);
    } else {
      var _class = 'content-left';
      contentLeft.attr('class', _class);
    }
  });

});
html {
  height: 2000px
}

.content-left {
  background: gold;
  width: 50px;
  height: 100px;
}

.content-left.leftContentFixed {
  position: fixed;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-left"></div>