Disable sticky sidebar for responsive view

Question

Here is my script I want to disable this script for responsive or mobile view I tried it in different ways but it is not working.

<script type="text/javascript">
$(function(){ // document ready
    if ($('#sidebar').length) { // make sure "#sticky" element exists
        var el = $('#sidebar');
        var stickyTop = $('#sidebar').offset().top; // returns number
        var stickyHeight = $('#sidebar').height();

        $(window).scroll(function(){ // scroll event
            var limit = $('#img1').offset().top - stickyHeight - 15;

            var windowTop = $(window).scrollTop(); // returns number

            if (stickyTop < windowTop){
                el.css({ position: 'fixed', top: 0 });
            }
            else {
                el.css('position','static');
            }

            if (limit < windowTop) {
                var diff = limit - windowTop;
                el.css({top: diff});
            }
        });
    }
});
</script>

cehck this: http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser — HudsonPH, Jun 28 '16 at 09:26
Define "responsive view". If you mean smaller viewports then possibly check if a certain element is visible and make that a condition in your script — sven, Jun 28 '16 at 09:27

bubesh · Answer 1 · 2016-06-28T10:25:30.483

3

To get the width and height of the viewport(Jquery):

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

In your case:

 if($(window).width()>=768){
//your script code goes here and it will work only if the viewport of the device is greater that or equal to 768 (change the value according to your need)
}

edited Jun 28 '16 at 10:25

answered Jun 28 '16 at 10:19

bubesh

426
1
4
15

Thank tou so much!! Worked for me – Vidya Jun 28 '16 at 12:30

score 0 · Answer 2 · answered Jun 28 '16 at 10:04

Try to use modernizr for that purpose, it has wide range of feature detection technique, such as touch devices like mobiles.

first of all include modernizr like this,

https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js

then use your function/javascript within modernizr like ,

if(!Modernizr.touch){ 

    $(function(){ // document ready
        if ($('#sidebar').length) { // make sure "#sticky" element exists
        var el = $('#sidebar');
        var stickyTop = $('#sidebar').offset().top; // returns number
        var stickyHeight = $('#sidebar').height();

        $(window).scroll(function(){ // scroll event
        var limit = $('#img1').offset().top - stickyHeight - 15;

        var windowTop = $(window).scrollTop(); // returns number

        if (stickyTop < windowTop){
            el.css({ position: 'fixed', top: 0 });
        }
        else {
            el.css('position','static');
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({top: diff});
        }
    });
   }
});        

}

It will work when there will be no touch device

B. I. Sadi · Answer 3 · 2016-06-28T10:20:00.103

<script type="text/javascript">
$(function(){ // document ready

 // screen.width will detect device width and will execute greater than 767(      from iPad) or can be set according to requirement

if ($('#sidebar').length && screen.width > 767 ) { // make sure "#sticky" element exists
    var el = $('#sidebar');
    var stickyTop = $('#sidebar').offset().top; // returns number
    var stickyHeight = $('#sidebar').height();

    $(window).scroll(function(){ // scroll event
        var limit = $('#img1').offset().top - stickyHeight - 15;

        var windowTop = $(window).scrollTop(); // returns number

        if (stickyTop < windowTop){
            el.css({ position: 'fixed', top: 0 });
        }
        else {
            el.css('position','static');
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({top: diff});
        }
    });
}
});
</script>

Disable sticky sidebar for responsive view

3 Answers3