Fixed div on scroll

Question

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?

t1m0n · Accepted Answer · 2016-05-05 09:43:33Z

1

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>

edited May 5, 2016 at 9:43

answered May 5, 2016 at 9:17

t1m0n

3,4411 gold badge20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thernys Over a year ago

Should also look into CSS media queries for this leftContentFixed stuff, no need to toggle with Javascript according to viewport width... right, unless it must only be applied depending on scroll state..

Boky Over a year ago

It isn't working. Now the class leftContentFixed isn't added at all.

Boky Over a year ago

No errors in console. I must change $(window).scrollTop() < height to $(window).scrollTop() > height . And it's working. But when I scroll back to top of the page leftContentFixed class still exists.

t1m0n Over a year ago

@Boky I forgot to add if statement, should work now, see changed answer

Boky Over a year ago

I just did it (added else statement) and it worked like a charm. Thanks mate.

Collectives™ on Stack Overflow

Fixed div on scroll

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related