Сделайте прокрутку div со страницей только в определенном месте?

Question

Как это сделать, чтобы div прокручивался со страницы, но только в определенной области страницы?

Я не могу понять, как это сделать с CSS только для части страницы, я думаю, что javascript может быть единственным вариантом.

См., Например, Существует три раздела страницы, Top, Средние и Нижняя.

Там есть право плавал DIV, который должен прокручивать с пользователем в средней части и остановить прокрутку, чтобы быть «оставаться на месте» в верхней части секции среднего, а также в нижней части средней секции .

#Top { 
 
    background-color: grey; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#Middle { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 800px; 
 
} 
 
#Bottom { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#scrolling-section { 
 
    background-color: yellow; 
 
    width: 30%; 
 
    height: 150px; 
 
    float: right; 
 
}

<div id="Top"> 
 
</div> 
 
<div id="Middle"> 
 
    <div id="scrolling-section"> 
 
    This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section 
 
    </div> 
 
</div> 
 
<div id="Bottom"> 
 
</div>

JSFiddle: fiddle

Answer 1

Так вот у вас есть решение с помощью JQuery:

1. Прослушайте scroll события и вычислить, сколько scrolling-section выходит за пределы секции Middle во время прокрутки вверх/вниз.

2. Добавлен position: relative в scrolling-section.

3. Соответственно отрегулируйте положение scrolling-section.

$(document).scroll(function() { 
 
    var wrapper = $('#Middle'); 
 
    var box = $('#scrolling-section'); 
 

 
    var offsetTop = - wrapper.offset().top + $(window).scrollTop(); 
 
    var offsetBottom = wrapper.offset().top - $(window).scrollTop() + wrapper.outerHeight() - box.outerHeight(); 
 

 
    if (offsetBottom > 0 && offsetTop < 0) { 
 
    box.css({ 
 
     'top': 0 
 
    }); 
 
    } else if (offsetBottom > 0 && offsetTop > 0) { 
 
    box.css({ 
 
     'top': offsetTop + 'px' 
 
    }); 
 
    } else { 
 
    box.offset({ 
 
     'top': $(window).scrollTop() + offsetBottom 
 
    }); 
 
    } 
 

 
});

#Top { 
 
    background-color: grey; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#Middle { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 800px; 
 
} 
 
#Bottom { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#scrolling-section { 
 
    position: relative; 
 
    background-color: yellow; 
 
    width: 30%; 
 
    height: 150px; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Top"> 
 
</div> 
 
<div id="Middle"> 
 
    <div id="scrolling-section"> 
 
    This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section 
 
    </div> 
 
</div> 
 
<div id="Bottom"> 
 
</div>

Позвольте мне знать ваше мнение по этому вопросу. Благодаря!

Answer 2

Некоторые Javascript необходим для того, чтобы прочитать точку, в которой вы хотите изменить состояние DIV вы хотите обратиться. Вы можете сделать это с помощью метода getBoundingClientRect(). Я разработал скрипку, которая покажет вам. Что происходит, так это то, что вы читаете позицию #Middle. Я добавил поле ввода, которое показывает вам значение. Изменение будет, когда позиция достигнет нуля. Затем вы изменяете свойства CSS в разделе # прокрутки.

Вы увидите некоторые дополнительные показания элемента, чтобы убедиться, что он может быть установлен на месте и сохранит свою первоначальную ширину;

var scrollposition = document.getElementById("Middle"); 
 
var scrollsection = document.getElementById("scrolling-section"); 
 
var scrollsection_offsetLeft = scrollsection.offsetLeft; 
 
var scrollsection_width = scrollsection.offsetWidth; 
 

 

 
var valy = document.getElementById("posy"); 
 

 

 
window.addEventListener("scroll", function(event) { 
 
    valy.value = scrollposition.getBoundingClientRect().y || scrollposition.getBoundingClientRect().top; 
 

 
    if (valy.value <= 0) { 
 
    scrollsection.style.position = "fixed"; 
 
    scrollsection.style.top = "0px"; 
 
    scrollsection.style.left = scrollsection_offsetLeft + "px"; 
 
    scrollsection.style.width = scrollsection_width + "px"; 
 
    } else { 
 
    scrollsection.style.position = "static"; 
 
    scrollsection.style.top = "auto"; 
 
    scrollsection.style.left = "auto"; 
 
    } 
 
}, false)

#posy { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
#Top { 
 
    background-color: grey; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#Middle { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 800px; 
 
} 
 
#Bottom { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#scrolling-section { 
 
    background-color: yellow; 
 
    width: 30%; 
 
    height: 150px; 
 
    float: right; 
 
}

<input type="text" id="posy" /> 
 
<div id="Top"> 
 
</div> 
 
<div id="Middle"> 
 
    <div id="scrolling-section"> 
 
    This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section 
 
    </div> 
 
</div> 
 
<div id="Bottom"> 
 
</div>

Answer 3

Я на мой мобильный, но если добавить

#scrolling-section { 
    position: fixed; 
    background-color: yellow; 
    width: 30%; 
    height: 150px; 
    right: 8px; 
} 

Это будет прокручивать со страницей, но на самом деле там должны быть прослушиватель события, который срабатывает, когда # на экране появляется прокрутка, возможно добавление позиции атрибута: исправлено; затем другой прослушиватель событий, когда появляется #bottom, вычисляется размер #middle set margin-top & position: absolute; надеюсь, это поможет указать в правильном направлении.