如果CSS具有特殊价值，请不要执行jQuery脚本

Question

On my website, I have a sidebar DIV on the left and a text DIV on the right. I wanted to make the sidebar follow the reader as he or she scrolls down so I DuckDuckGo'ed a bit and found this then modified it slightly to my needs:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){

    var $sidebar = $('#sidebar'),
        sidebarOffset = $sidebar.offset(),
        $window = $(window),
        gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
        distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
        footerHeight = $('#footer').outerHeight();

    $window.scroll(function(){
        distance = ($window.scrollTop()) - (sidebarOffset.top - gap);        
        if ( distance > 0 ) {
            $sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
        } else {
            $sidebar.css({'top': '0', 'position': 'relative'});
        }

    })

});    

});//]]>  

</script>

And it works just like I want it to. However, my website uses Skeleton framework to handle responsive design. I've designed it so that when it goes down to mobile devices (horizontal then vertical), sidebar moves from being to the left of the text to being above it so that text DIV can take 100% width. As you can probably imagine, this script causes the sidebar to cover parts of text as you scroll down.

I am completely new to jQuery and I am doing my best through trial-and-error but I've given up. What I need help with is to make this script not execute if a certain DIV has a certain CSS value (ie #header-logo is display: none ).

Ideally, the script should check for this when user resizes the browser, not on website load, in case user resizes the browser window from normal size to mobile size.

I imagine it should be enough to wrap it in some IF-ELSE statement but I am starting to pull the hair out of my head by now. And since I don't have too much hair anyway, I need help!

Thanks a lot in advance!

Answer 1

$("#headerLogo").css("display") will get you the value.

http://api.jquery.com/css/

I also see you only want this to happen on resize, so wrap it in jquery's resize() function:

https://api.jquery.com/resize/

Answer 2

This function will execute on window resize and will check if #header-logo is visible.

$(window).resize(function() {
    if ($('#header-logo').is(':visible')) {
        // Your code
    }
});

I think you need to check this on load to, because you don't know if the user will start with mobile view or not. You could do something like this:

$(window).resize(function() {
    if ($('#header-logo').is(':visible')) {
        // Your code
    }
}).resize();

This will get executed on load and on resize.

EDIT: You will probably need to turn off the scroll function if #header-logo is not visible. So, instead of create the function inside the scroll event, you need to create it outside:

$(window).resize(function() {
    if ($('#header-logo').is(':visible')) {
        var $sidebar = $('#sidebar'),
            sidebarOffset = $sidebar.offset(),
            $window = $(window),
            gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
            distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
            footerHeight = $('#footer').outerHeight();

        function myScroll() {
            distance = ($window.scrollTop()) - (sidebarOffset.top - gap);        
            if ( distance > 0 ) {
                $sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
            } else {
                $sidebar.css({'top': '0', 'position': 'relative'});
            }
        }

        $window.on('scroll', myScroll);
    } else {
        $(window).off('scroll', myScroll);
    }
});

Didn't test it, but you get the idea.