JQuery: исправление Div, включая окно изменения размера

0

Привет, я работаю над фиксированным/закрепленным Div также после изменения размера окна браузера. Для исправления Div нет проблем, но я не могу автоматически изменять размер ширины с помощью jquery. Мой текущий код:

 <script type="text/javascript">
    $(window).load(function(){
        function fixDiv() {
            var $cache = $('.pin');
            if ($(window).scrollTop() > 100)
                $cache.css({'position': 'fixed', 'top': '10px', width: $('.pin-wrapper').width()});
           else
                $cache.css({'position': 'relative', 'top': 'auto', width: $('.pin-wrapper').width()});
        }
        $(window).scroll(fixDiv);
        fixDiv();
    });
    $(document).ready(function(){
        fixDiv();
    });
    $(window).resize(function(){
        fixDiv();
    });
</script>

Html выглядит так:

<div class="grid-12 parent"> <!-- Kolos 12.02.2014 -->
        <div class="pin-wrapper">
                <div id="header" class="main-menu-container grid-12 hide-mobile pin"></div></div></div>

спасибо за любую помощь Cheers, Carol

  • 0
    Вы вызываете fixDiv () так много раз. $(window).on('load resize scroll', fixDiv); было бы достаточно. Теперь, что касается вашей проблемы, вы должны повторить ее на jsFiddle. Кстати 'width': $('.header') не имеет смысла, и ваш селектор .header выглядит неправильно, и т.д ...
  • 0
    @A. Вольф, спасибо за ответ. Это работает сейчас.
Показать ещё 6 комментариев
Теги:
scroll
resize
fixed

2 ответа

1
Лучший ответ

Вы сталкиваетесь с проблемой fixDiv() метод fixDiv() объявляется внутри обработчика onload. Вместо этого вы можете использовать:

function fixDiv() {
    var $cache = $('.pin');
    if ($(window).scrollTop() > 100) $cache.css({
        'position': 'fixed',
        'top': '10px',
        width: $('.pin-wrapper').width()
    });
    else $cache.css({
        'position': 'relative',
        'top': 0,
        'width': $('#header').width()
    });
}
$(window).on('load resize scroll', fixDiv);

Но в вашей размещенной HTML-разметке появляется, как нет элемента с header класса, похоже, что вы нацеливаете элемент с header ID. Но тогда #header - это тот же самый элемент, что и $cache, довольно запутанный.

Поделиться
  • 0
    Извините, но после этого изменения div больше не фиксируется.
  • 0
    Ошибка @AtelierBasel в консоли? В любом случае, если вам нужна соответствующая помощь, нам нужно просмотреть весь ваш соответствующий код. Что насчет jsFiddle ?!
Показать ещё 4 комментария
0

Как отметил А. Вольф, вы не должны добавлять свои события в функцию load. Поскольку вы делали это, ваше событие прокрутки не было запущено.

Вы вообще не нуждаетесь в load как здесь видно:

http://jsfiddle.net/uwkc9/3/

Если вы scroll или resize вы увидите, что они работают.

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню