How to make this Jquery code listen to add media queries

[wilbersoft]

I made my sidebar sticky with this JQuery:

$(function(){ // document ready
if (!!$('#sidebarfo').offset()) { // make sure ".sticky" element exists
var stickyTop = $('#sidebar').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
var CurrentWidth = 350;
if (stickyTop < windowTop){
//NEW SECTION
var footerAboveThirty = $('adbottom').offset().top - $('#sidebar').height() - 65;
if (windowTop > footerAboveThirty) {
$('#sidebar').css({ position: 'absolute', top: footerAboveThirty, width: CurrentWidth});
} else {
$('#sidebar').css({ position: 'fixed', top: 165, width:CurrentWidth });
}
//END NEW SECTION
} else {
$('#sidebar').css('position','static');
}
});
}
}});

But I want to make the sidebar become static and have width:100% on screen resolutions below 700px. What I mean is that if the screen resolution is above 700px, the sidebar will apply the above Jquery but if it is below 700px, the sidebar will become static and have a width of 100%.

I have tried doing it this way but it didn’t work: $(function(){ // document ready

var mq = window.matchMedia( "(min-width: 768px)" );

    if (mq.matches) {

if (!!$('#sidebarfo').offset()) { // make sure ".sticky" element exists
var stickyTop = $('#sidebarfo').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
var CurrentWidth = 350;

if (stickyTop < windowTop){
//NEW SECTION
var footerAboveThirty = $('adbottom').offset().top - $('#sidebarfo').height() - 65;
if (windowTop > footerAboveThirty) {
$('#sidebarfo').css({ position: 'absolute', top: footerAboveThirty, width: CurrentWidth});
} else {
$('#sidebarfo').css({ position: 'fixed', top: 165, width:CurrentWidth });
}
//END NEW SECTION
} else {
$('#sidebarfo').css('position','static');
}
});
}
}});
Please, any better suggestion?

[Shikkediel]

I don’t really see any advantage of using window.Matchmedia. More so, you have the same drawback of getting the dimensions of the whole screen instead of just the visible part (in case of a scrollbar). I’d just use $(window).width() with if and else statements.

Agree with Alen that the post is utterly unreadable like this.

:-/

[wilbersoft]

Ok, this is the live code on JSFiddle: http://jsfiddle.net/07nj8ar8/

[Shikkediel]

How about something like this?

$(function () {

    var width = $(window).width();

    $(window).resize(function() {
    width = $(window).width();
    });

    if (!!$('.sticky').offset()) {

    var stickyTop = $('.sticky').offset().top;

    $(window).scroll(function () {

        var windowTop = $(window).scrollTop();
        var CurrentWidth = 200;

        if (stickyTop < windowTop && width > 700) {
        //NEW SECTION
        var footerAboveThirty = $('footer').offset().top - $('.sticky').height() - 30;
        if (windowTop > footerAboveThirty) {
        $('.sticky').css({
        position: 'absolute',
        top: footerAboveThirty,
        width: CurrentWidth
        });
        } else {
        $('.sticky').css({
        position: 'fixed',
        top: 0,
        width: CurrentWidth
        });
        }
        //END NEW SECTION
        } else {
        $('.sticky').css('position', 'static');
        }
    });
    }
});

[Author]

Posts