Не выполняйте скрипт jQuery, если CSS имеет особое значение

Question

Не выполняйте скрипт jQuery, если CSS имеет особое значение

0

На моем веб-сайте у меня есть боковая панель DIV слева и текст DIV справа. Я хотел сделать боковую панель, следуя за читателем, когда он или она прокручивается вниз, так что я DuckDuckGo'a немного, и нашел это, а затем немного изменил его к моим потребностям:

<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>

И он работает так, как я хочу. Тем не менее, мой сайт использует структуру Skeleton для работы с гибким дизайном. Я разработал его так, что когда он переходит на мобильные устройства (горизонтальный, а затем вертикальный), боковая панель перемещается из левого угла текста вверх, чтобы текст DIV мог принимать 100% ширину. Как вы можете себе представить, этот сценарий заставляет боковую панель покрывать части текста при прокрутке вниз.

Я совершенно новичок в jQuery, и я делаю все возможное, используя пробную версию, но я отказался. Мне нужна помощь в том, чтобы этот сценарий не выполнялся, если определенный DIV имеет определенное значение CSS (т.е. #header-logo display: none).

В идеале сценарий должен проверять это, когда пользователь изменяет размер браузера, а не на загрузку сайта, в случае, если пользователь изменит размер окна браузера от нормального размера до размера мобильного телефона.

Я предполагаю, что этого должно быть достаточно, чтобы обернуть его в каком-то утверждении IF-ELSE, но сейчас я начинаю вытягивать волосы из головы. И так как у меня нет слишком много волос, мне нужна помощь!

Заранее большое спасибо!

pglaz 13 апр. 2014, в 22:13

Источник

Теги:

javascript

jquery

html

css

css3

2 ответа

0

$("#headerLogo").css("display") даст вам значение.

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

Я также вижу, что вы хотите, чтобы это произошло при изменении размера, поэтому оберните его в функцию jquery resize():

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

pennstatephil 13 апр. 2014, в 17:35

Ещё вопросы

azeós · Accepted Answer · 2014-04-13T17-06-00.000Z

Эта функция будет выполняться при изменении размера окна и проверяет, отображается ли #header-logo.

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

Я думаю, вам нужно проверить это при загрузке, потому что вы не знаете, начнется ли пользователь с мобильного просмотра или нет. Вы могли бы сделать что-то вроде этого:

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

Это будет выполнено при загрузке и изменении размера.

EDIT: вам, вероятно, придется отключить функцию прокрутки, если #header-logo не отображается. Таким образом, вместо создания функции внутри события прокрутки вам необходимо создать ее за пределами:

$(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);
    }
});

Не тестировал, но вы поняли.

Спасибо! Это работает прекрасно :) Однако я только что понял, что не объяснил дело должным образом. Мне нужно, чтобы скрипт и проверка происходили при изменении размера И при загрузке окна, чтобы охватить все возможные сценарии. Я поменял первую строку на $(window).on('load resize', function() { и, кажется, все работает нормально. Как вы думаете, это может вызвать некоторые проблемы?
Я рад, что смог помочь. Я думаю, это нормально, что ты сделал. Посмотрите, что произойдет, если при загрузке страницы #header-logo не будет виден, функция myScroll не определена, я не знаю, покажет ли это ошибку.