Решение прокручивающего элемента внутри ниже div (под экраном) - я хочу исправить его после прокрутки - PullRequest
Новая
       3

Решение прокручивающего элемента внутри ниже div (под экраном) - я хочу исправить его после прокрутки

1 голос
/ 17 февраля 2012

Я не знаю, как решить эту ситуацию:

Я получил html / css выглядит следующим образом: Изображение, показывающее, как выглядит мой css / html и что отображается на экране после приземления настраница: enter image description here

Когда я прокручиваю вниз, я вижу зеленый элемент: прокрутка вниз -> enter image description here

После продолжения прокрутки вниз я вижу полностью зеленый элемент, и если я прокручиваю внизЯ хочу, чтобы этот элемент был похож на язык css: позиция с фиксированным основанием 0. См. Изображение ниже: Я увидел полный элемент -> та же ссылка, но изображение с названием problem3.png

, а затем прокручиваю ниже и хочузафиксировать его внизу страницы, как на этом изображении:

Исправлен элемент на экране - что я хочу, и я не знаю, как это сделать -> та же ссылка, но изображение под названием problem4.png (глупомеханизм предотвращения спама)

Возможно ли разрешить эту ситуацию?

Подводя итог: у меня есть два деления, одно сверху и снизу, когда я прокручиваю вниз, я вдруг вижу другой элемент(зеленый div)и когда я продолжаю прокручивать вниз, Я ХОЧУ ИСПОЛЬЗОВАТЬ ЭТОТ ЗЕЛЕНЫЙ DIV, ИСПРАВЛЕННЫЙ НА ДНЕ СТРАНИЦЫ.вершина второго div.

Есть ли способ решить эту ситуацию с помощью jQuery (Javascript) / html / css?

Заранее спасибо

1 Ответ

1 голос
/ 17 февраля 2012

Я думаю, вам придется показать некоторые из ваших HTML структуры.Есть много способов добиться такого эффекта.По сути, в терминах javascript вы будете искать:

  1. Добавить прослушиватель событий в прокрутку окна, которая проверяет, полностью ли отображается зеленый элемент
  2. Если он отображается, добавьте класс (или измените его CSS), который фиксирует его положение, где вы хотите
  3. Измените метод прокрутки окна, чтобы он проверял относительное смещение красного div в верхней части экрана.Если он опустится ниже позиции, в которой должен быть зафиксирован зеленый div, удалите класс, который вы добавили ранее.

Звучит сложно, но не так уж плохо.Javascript будет выглядеть примерно так: 

$(function() {
  $(window).scroll(function() {

    if($(".divToFix").hasClass("fixedAtBase")){
        if(Utils.underView($(".redDiv"), $(".divToFix").height())) $(".divToFix").removeClass("fixedAtBase");
    } else {
        if(Utils.inView($(".divToFix"))) $(".divToFix").addClass("fixedAtBase");
    }

  });


});

Utils = {
    underView: function(element, offset) {
        return (($(window).height() + $(window).scrollTop() - offset) <= element.offset().top);
    },

    aboveView: function(element) {
        return ($(window).scrollTop() >= element.offset().top + element.height());
    },

    inView: function(element) {
        return (Utils.aboveView(element) !== true && Utils.underView(element, element.height()) !== true);
    }
};

Имейте в виду, я не проверял это или что-то еще.

edit - вот demo

...