Как изменение размера окна работает в JQuery?

0

Поэтому у меня есть эта функция, она довольно длинная и сложная.

Теперь я могу заставить его работать, если изменяется ширина окна, но сначала нужно запустить событие прокрутки.

Как заставить его работать с изменением размера окна?

       $(document).bind("scroll.myScroll", function () {

    var scrollTop = $(document).scrollTop();
        masthead = $(".mast-head").outerHeight();
        notef = $(".note-f").outerHeight();
        frontcontainheight = $(".center").outerHeight();
        //derivative variable
            abpos = (frontcontainheight / 2.1);

        sidebarwidth = $(".sidebarholder").width();
        dataheight = $(".data-top").outerHeight(true);

        controlwidth = $(".loop-contain").outerWidth();
        innerwidth = $(".front-contain").outerWidth();
        //get side-contain width dynamically    
        //derivative variable   
            sidecon = (controlwidth - innerwidth);

        elem = $(".center");
        paddingTopBottom = elem.innerHeight() - elem.height();


        console.log (controlwidth);

            if ($(window).width() > 1200) {
                if (scrollTop > notef + dataheight + masthead - 50 + paddingTopBottom) {
                    $('.side-contain').css({
                        position: "fixed",
                        left: sidebarwidth + innerwidth,
                        top: "50px",
                        width: sidecon - "24"

                    });

                }
                if (scrollTop < notef + dataheight + masthead - 50 + paddingTopBottom) {
                    $('.side-contain').css({
                    position: "relative",
                    left: "",
                    top: "",
                    width: ""
                    });

                }
                if (scrollTop > abpos + masthead - 50 + paddingTopBottom) {
                    $('.side-contain').css({
                    position: "absolute",
                    left: innerwidth,
                    top: abpos - notef, // if the scroll is more than half the height of front-contain then lock to that position, ie. the amount scroll of front-contain - 63px.

                    width: sidecon - "24"

                    });

                }


            } else if ($(window).width() < 1200) {
                  $('.side-contain').css({
                    position: "relative",
                    left: "",
                    top: "",
                    width: ""
                    });

            }


});
  • 0
    offtopic: вы можете передавать все свои атрибуты css одновременно, не нужно делать 4 отдельных вызова селектора и .css() .
  • 0
    Да, я знаю, мне просто легче так написать, прежде чем я на самом деле что-то заканчиваю. Я знаю, что это плохо.
Показать ещё 1 комментарий
Теги:

2 ответа

0

что-то вроде:

 $(window).on("resize", function () {
      $.trigger('scroll.myScroll');
  }).trigger("resize");
Поделиться
  • 0
    Боюсь, не работает
0

Вероятно, вы, вероятно, должны использовать гибкую сетку, а не событие изменения размера. Запросы @media и выборочные стили - это путь. http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Я не знаю точно, что вы пытаетесь сделать здесь, но каждый раз, когда вы проверяете позиции прокрутки и т.д., Вы вынуждаете поток ui повторно оценивать позиционирование. Это дорого. Если вам нужно что-то прокрутить на определенной высоте, то, по крайней мере, убедитесь, что вы установите проверку глубины прокрутки на тайм-аут, чтобы не блокировать поток пользовательского интерфейса. Прямо сейчас для каждого изменения пикселя при изменении размера вы проверяете всевозможные высоты и многое другое. Положите небольшую задержку там (не менее 15 мс), чтобы позволить потоку пользовательского интерфейса дышать, пока вы его избиваете "где этот элемент, где находится этот элемент?!?!?!"

Кроме того, вы нажимаете.css несколько раз. Почему бы не поместить эти изменения в объект? .css({"background-color": "#ffe", "border-left": "5px solid #ccc"}). http://api.jquery.com/css/#css-properties

Помимо этого событие "изменить размер" должно сделать это за вас... см. Выше

Поделиться
  • 0
    Хорошо, что он делает блокировку боковой панели в верхней части экрана, когда прокручивается определенное количество страниц, отсюда и все переменные. Затем он получает ширину нескольких элементов, чтобы решить, куда поместить эту боковую панель (она находится справа на странице), после дополнительной прокрутки он устанавливает ее положение: абсолютное, чтобы можно было увидеть нижнюю часть. Сайт уже «реагирует» на медиа-запросы, это то, что можно сделать только с помощью javascript. Обновлен с новым кодом, поэтому он не так сильно ударил .css.
  • 0
    Можете ли вы сделать запрос @media, чтобы применить абсолютное или фиксированное положение при разных разрешениях? В любом случае попробуйте добавить границу для изменения размера полностью вне кода, который вы здесь имеете. Начните с базового варианта. Тогда вы можете попытаться заставить другие вещи происходить при изменении размера

Ещё вопросы

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