Arhn - архитектура программирования

Положение переключения исправлено в зависимости от положения прокрутки

У меня есть следующий код, который фиксирует положение меню в том месте, где оно будет прокручиваться вверху страницы.

$(function () {
    var msie6 = $.browser == 'msie' && $.browser.version < 7;
    if (!msie6) {
    var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
    $('.menu').addClass('fixed');
    } else {
    $('.menu').removeClass('fixed');
    }
    });
    }
});

css

.container {
    width:400px; 
    margin:auto;
}

.header {
    background-color:#096; 
    height:150px;
}

.fixed {
    position:fixed;
    top:0px;
    left:50%;
    margin-left:50px;
}

.bodyContainer {
    overflow:hidden;
}

.menu {
    float:right; 
    width:150px; 
    height:250px; 
    background-color:#F00;
}

.bodyCopy {
    float:left; 
    width:250px; 
    height:1000px;
}

.footer {
    background-color:#096; 
    height:250px;
}

HTML

<div class="container">

<div class="header">
    <p>Test Header</p>
</div>

<div class="bodyContainer">

    <div class="menu">
        <p>test</p>
    </div>

    <div class="bodyCopy">
        <p>test</p>
    </div>

</div>


<div class="footer">
    <p>Test Footer</p>
</div>

What I now want to do is make it start scrolling again when the user reaches the bottom of the page (so that it does not cover the footer in the page).

jsfiddle здесь...

javascript jquery css-position
08.08.2011

Ответы:


1 
var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
var _height = $('.menu').height();
$(window).scroll(function(event) {
    var y = $(this).scrollTop();
    var z = $('.footer').offset().top;
    if (y >= top && (y+_height) < z) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

http://jsfiddle.net/AlienWebguy/CV3UA/1/

Если вы хотите, чтобы меню просто оставалось там, где оно находится, когда оно достигает нижнего колонтитула, вам нужно добавить больше логики, чтобы добавить его в DOM:

var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
    var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
    var _height = $('.menu').height();
    var _original_top = $('.menu').offset().top;
    $(window).scroll(function(event) {
        var y = $(this).scrollTop();
        var z = $('.footer').offset().top;
        if (y >= top && (y + _height) < z) {
            $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').addClass('fixed');
        } else {
            if ((y + _height) >= z) {
                $('#menu').insertBefore($('.footer')).removeClass('fixed').addClass('stuck-bottom');
            }
            else $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').removeClass('fixed');
        }
    });
}

Я уверен, что есть более элегантный способ сделать это. Поэкспериментируйте :) http://jsfiddle.net/AlienWebguy/CV3UA/2/

08.08.2011
  • Мне это нравится ... Есть ли способ заставить его снова начать прокручиваться, а не возвращаться в исходное положение где-то далеко от верхней части экрана ?? Спасибо 08.08.2011
  • Просто нужно отредактировать строку 12 выше, чтобы остановить небольшое мерцание... спасибо - if ((y + _height) ›= z) { 08.08.2011

    • 2

    Вот новый подход с css3.

    используйте position:sticky, чтобы следовать за прокруткой.

    Вот статья объяснила.

    http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

    и старый способ сделать это демо

    с демонстрацией фиксированной позиции

    14.09.2012
  • да, но хром пока не поддерживает :( 24.09.2014
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..