I'm trying to make testimonials and next button works fine but the back(previous) button when i click first click work but when click next and click back again the code stop working and i don't know what is the problem.........:/
here is my code..
$(document).ready(function() {
var peopleOpinion = $(".people-opinion:first");
var peopleCount = $(".people-opinion").length; // 9 items(div)
// one row have 3 items(div)
// 4.5 = one click
var clicksNum = Math.round(peopleCount / 4.5);
var pre = $(".previous");
var next = $(".next");
var marginLeft = -300;
var clicks = 1;
next.on('click', function() {
if (clicks <= clicksNum && !(marginLeft == 0)) {
peopleOpinion.css({"margin-left" : marginLeft + "px"});
marginLeft += -300;
clicks++;
} else if (marginLeft == 0) {
peopleOpinion.css({"margin-left" : "-300px"});
clicks++;
} else {
peopleOpinion.css({"margin-left" : "0px"});
marginLeft = -300;
clicks = 1;
}
});
pre.on('click', function() {
if (!(marginLeft == 0)) {
marginLeft += 300;
peopleOpinion.css({"margin-left" : marginLeft + "px"});
}
});
});
.container {
display: flex;
overflow: hidden;
width: 290px;
border: 2px solid #DDD;
}
.container .people-opinion {
display: inline-block;
max-width: 29%;
flex: 0 0 100%;
padding: 3px;
margin: 10px 0px 10px 10px;
transition: all 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="people-opinion">Hello world111</div>
<div class="people-opinion">Hello world222</div>
<div class="people-opinion">Hello world333</div>
<div class="people-opinion">Hello world444</div>
<div class="people-opinion">Hello world555</div>
<div class="people-opinion">Hello world666</div>
<div class="people-opinion">Hello world777</div>
<div class="people-opinion">Hello world888</div>
<div class="people-opinion">Hello world999</div>
</div>
<button class="next">Next</button>
<button class="previous">previous</button>
Ok This is the code you need .. but let me explain somethings first
first of all you'll need to know that working with % in css needs no margins and no padding .. it will be better to control the percentages without margins and paddings
$(document).ready(function() {
var containerWidth = $('.container').width();
var peopleOpinion = $(".people-opinion:first");
var peopleCount = $(".people-opinion").length; // 9
var clicksNum = peopleCount / 3;
var pre = $(".previous");
var next = $(".next");
var clicks = 1;
next.on('click', function() {
if (clicks < clicksNum) {
peopleOpinion.css({"margin-left" : - containerWidth * clicks + "px"});
clicks++;
}
});
pre.on('click', function() {
var pclicks = clicksNum - clicks - 1;
if (clicks <= clicksNum && clicks !== 1) {
peopleOpinion.css({"margin-left" : + containerWidth * pclicks + "px"});
clicks--;
}
});
// if you working on a responsive website you may need to use `resize` and update the container width
$(window).on('resize' , function(){
containerWidth = $('.container').width();
});
});
.container {
display: flex;
overflow: hidden;
width: 100%;
border: 2px solid #DDD;
}
.container .people-opinion {
display: inline-block;
transition: all 1s ease-in-out;
max-width : 33.33333333%;
flex: 0 0 100%;
}
.people-opinion > div{
margin : 4px;
padding : 2px;
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="people-opinion"><div>Hello world111</div></div>
<div class="people-opinion"><div>Hello world111</div></div>
<div class="people-opinion"><div>Hello world111</div></div>
<div class="people-opinion"><div>Hello world111</div></div>
<div class="people-opinion"><div>Hello world111</div></div>
<div class="people-opinion"><div>Hello world111</div></div>
<div class="people-opinion"><div>Hello world111</div></div>
<div class="people-opinion"><div>Hello world111</div></div>
<div class="people-opinion"><div>Hello world111</div></div>
</div>
<button class="next">Next</button>
<button class="previous">previous</button>
-Explanation
while you have margins and padding on people-opinion that makes you use 290px and 29% and its totally wrong .. use the exact width you need which should be 300px and because of that I wrapped another div .people-opinion > div inside people-opinion and set style to it .. in my code I made it responsive so I set the container width to 100%
In the previous button you need to use var pclicks = clicksNum - clicks - 1; which gives you the right number of clicks you need to go to the previous step ..
Once marginLeft is 0 and clicks is greater than 2, the only operation that is allowed to happen is:
peopleOpinion.css({"margin-left" : "-300px"});
clicks++;
I simplified your logic a bit, and this seems to work:
var slot = 0;
next.on('click', function() {
slot++;
slot=slot%3;
peopleOpinion.css({"margin-left": (slot*-300)+ "px"});
});
pre.on('click', function() {
slot--;
if (slot < 0)
slot = 2;
peopleOpinion.css({"margin-left": (slot*-300)+ "px"});
});
This can even be generalized further if we have a variable like pages = Math.ceil(people/3) and work with that instead of constants above.
Related
I'm trying to make a page with multiple sticky sections with horizontal scrolling (so when you're scrolling vertically as normal, you're forced to go through the horizontal gallery)
I'm referencing this codepen (https://codepen.io/johnhubler/pen/RwoPRBG) as my JS knowledge is very poor. But, as you can see in the codepen, it is only working in the first sticky section, and the second one stays still.
var windowWidth = window.innerWidth;
var horLength = document.querySelector(".element-wrapper").scrollWidth;
var horLength2 = document.querySelector(".element-wrapper2").scrollWidth;
var distFromTop = document.querySelector(".horizontal-section").offsetTop;
var distFromTop2 = document.querySelector(".horizontal-section2").offsetTop;
var scrollDistance = distFromTop + horLength - windowWidth;
var scrollDistance2 = distFromTop2 + horLength2 - windowWidth;
document.querySelector(".horizontal-section").style.height = horLength + "px";
document.querySelector(".horizontal-section2").style.height = horLength2 + "px";
window.onscroll = function(){
var scrollTop = window.pageYOffset;
if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
document.querySelector(".element-wrapper").style.transform = "translateX(-"+(scrollTop - distFromTop)+"px)";
}
if (scrollTop >= distFromTop2 && scrollTop <= scrollDistance2) {
document.querySelector(".element-wrapper2").style.transform = "translateX(-"+(scrollTop - distFromTop2)+"px)";
}
}
I'm planning to add around 4 of the same sticky sections, so I'd like to know how to make it work in all of them. If there is a better alternative/resource/etc.(if possible, vanilla JS or something very easy to follow) please let me know.
Thank you
I made an optimized and working version of your code.
This array lists the classes of packaging elements. This way you can add as many galleries as you want by simply adding a new class to the array.
var array = ['.horizontal-section', '.horizontal-section2'];
Example:
var array = ['.horizontal-section', '.horizontal-section2'];
window.onscroll = function () {
var windowWidth = window.innerWidth;
var scrollTop = window.pageYOffset;
array.forEach(el => {
var wrap = document.querySelector(el);
var elWrap = wrap.querySelector(".element-wrapper");
var horLength = elWrap.scrollWidth;
var distFromTop = wrap.offsetTop;
var scrollDistance = distFromTop + horLength - windowWidth;
wrap.style.height = horLength + "px";
if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
elWrap.style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
}
});
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.bumper {
width: 100%;
height: 1800px;
background-color: #f3f3f3;
}
.horizontal-section,
.horizontal-section2 {
padding: 100px 0;
background-color: pink;
}
.sticky-wrapper,
.sticky-wrapper2 {
position: sticky;
top: 100px;
width: 100%;
overflow: hidden;
}
.element-wrapper,
.element-wrapper2 {
position: relative;
display: flex;
}
.element {
width: 500px;
height: 400px;
background-color: purple;
margin: 0 20px 0 0;
flex-shrink: 0;
}
<div class="bumper"></div>
<div class="horizontal-section">
<div class="sticky-wrapper">
<div class="element-wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
</div>
<div class="bumper"></div>
<div class="horizontal-section2">
<div class="sticky-wrapper">
<div class="element-wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
</div>
<div class="bumper"></div>
I would like to emulate something like "current page" using divs (like a PDF reader)
document.addEventListener("DOMContentLoaded", function(event) {
var container = document.getElementById("container");
container.onscroll = function() {
let position = container.scrollTop;
let divs = document.querySelectorAll('.page');
for (div of divs) {
//???
}
}
});
#container {
width: 400px;
height: 600px;
overflow: auto;
}
.page {
width: 400px;
}
.red {
background-color: red;
height: 600px;
}
.blue {
background-color: blue;
height: 400px;
}
Current page: <span id="page-counter">1</span>
<div id='container'>
<div id="div-1" class="page red"></div>
<div id="div-2" class="page blue"></div>
<div id="div-3" class="page red"></div>
<div id="div-4" class="page blue"></div>
</div>
So, I would like to know the best way to, for example, change span page-counter text to "3" when the third div "appears".
Something like this: https://i.imgur.com/rXQ2Bw8.png
Thanks in advance
Celso
Since this question never tagged jQuery, here's a pure Javascript solution that simulates the behavior you're looking for to the best of my knowledge. The solution calculates the amount of pixels of each child element currently visible within the container. If the amount is bigger or equal to half the size of the container, it assumes this is the page your visitor is looking at.
function getVisibleHeight(element){
const container = document.getElementById("container");
let scrollTop = container.scrollTop;
let scrollBot = scrollTop + container.clientHeight;
let containerRect = container.getBoundingClientRect();
let eleRect = element.getBoundingClientRect();
let rect = {};
rect.top = eleRect.top - containerRect.top,
rect.right = eleRect.right - containerRect.right,
rect.bottom = eleRect.bottom - containerRect.bottom,
rect.left = eleRect.left - containerRect.left;
let eleTop = rect.top + scrollTop;
let eleBot = eleTop + element.offsetHeight;
let visibleTop = eleTop < scrollTop ? scrollTop : eleTop;
let visibleBot = eleBot > scrollBot ? scrollBot : eleBot;
return visibleBot - visibleTop;
}
document.addEventListener("DOMContentLoaded", function(event) {
const container = document.getElementById("container");
const divs = document.querySelectorAll('.page');
container.addEventListener("scroll", () => {
for(let i=0; i<divs.length; i++){
const containerHeight = container.clientHeight;
// Gets the amount of pixels currently visible within the container
let visiblePageHeight = getVisibleHeight(divs[i]);
// If the amount of visible pixels is bigger or equal to half the container size, set page
if(visiblePageHeight >= containerHeight / 2){
document.getElementById('page-counter').innerText = i+1;
}
}
}, false);
});
#container {
width: 400px;
height: 300px;
overflow: auto;
}
.page {
width: 380px;
}
.red {
background-color: red;
height: 300px;
}
.blue {
background-color: blue;
height: 200px;
}
Current page: <span id="page-counter">1</span>
<div id='container'>
<div id="div-1" class="page red"></div>
<div id="div-2" class="page blue"></div>
<div id="div-3" class="page red"></div>
<div id="div-4" class="page blue"></div>
</div>
The general approach here would be to write a function that determines if a given HTML element is in the viewport. You could run the check as the user scrolls. See the snippet below for an example with jQuery. I'm not necessarily saying this is the best way to do this, but it seems to be working. Start scrolling to see the IDs appear.
function isInViewPort(element) {
// Function will determine if any part of the element is in the viewport.
let $el = $("#" + element);
let windowScrollTop = $(window).scrollTop();
let windowHeight = $(window).height();
let windowBottom = windowScrollTop + windowHeight;
let elementTop = $el.offset().top;
let elementOuterHeight = $el.outerHeight();
let elementBottom = elementTop + elementOuterHeight;
let isAboveViewPort = elementBottom < windowScrollTop;
let isBelowViewPort = windowBottom < elementTop;
return !(isAboveViewPort || isBelowViewPort);
}
let currentDiv;
$("#container").on("scroll", function() {
$("#container").find("div").each(function() {
if (isInViewPort(this.id) && currentDiv !== this.id) {
$("#page").html("Current ID is " + this.id)
currentDiv = this.id;
}
});
});
#container {
overflow: auto;
height: 300px;
}
.red {
background-color: red;
height: 600px;
}
.blue {
background-color: blue;
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="page"></span>
<div id='container'>
<div id="div-1" class="page red"></div>
<div id="div-2" class="page blue"></div>
<div id="div-3" class="page red"></div>
<div id="div-4" class="page blue"></div>
</div>
you can use the is visible feature in jQuery. Just give each div a unique ID or class.
if( $("#uniqueIdHere").is(':visible'))
$(".page3Selector").addClass('active');
and then to remove the active class you could pair it up with an else statement to remove the class of the inactive div.
The following code makes my div slide from right to left in my screen. I want to reverse the animation on second button click . But this simply makes my div disappear and appear instantaneously without any animation.Function slider3 is my failed attempt at reversing the animation. The login box right margin is initially -570px .
function call_slider() {
setTimeout("slider()", 50)
}
function slider() {
var label = document.getElementById("container1");
if (label.style.display == 'block') {
alert('this Element is block');
document.getElementById("login_box").style.right = "-570px";
label.style.display = "none";
} else {
alert('this Element is hidden');
setInterval(slider2, 10);
label.style.display = "block";
}
}
function slider2() {
if (document.getElementById("login_box").style.right != "10px") {
document.getElementById("login_box").style.right = parseInt(document.getElementById("login_box").style.right || 0) + 10 + 'px';
}
}
function slider3() {
if (document.getElementById("login_box").style.left != "-570px") {
document.getElementById("login_box").style.left = parseInt(document.getElementById("login_box").style.left || 0) + 10 + 'px';
}
}
.login-box {
width: 320px;
position: absolute;
top: 0px;
margin: 0;
background: white;
padding: 0 0 0 0;
}
.container1 {
width: 100%;
height: 100%;
overflow: hidden;
display: none;
display: flex;
justify-content: flex-end;
opacity: 0.9;
}
<div class="container1" id="container1" style="height:900px;position:absolute; z-index: 1;">
<form method="post" id="myform" onsubmit="mySubmit() " style="">
{% csrf_token %}
<div class="login-box" id="login_box" style=" right:-570px;">
</div>
</form>
</div>
Changes are commented in your code
function call_slider() {
setTimeout("slider()", 50)
}
function slider() {
var label = document.getElementById("container1");
if (label.style.display == 'block') {
alert('this Element is block');
//replaced your code with slider 3 function
//assign interval function as a proprty of global window so it can be accessed by another function
window.moveRight = setInterval(slider3, 10);
} else {
alert('this Element is hidden');
//make your element visible before start animation
label.style.display = "block";
window.moveLeft = setInterval(slider2, 10);
}
}
function slider2() {
//parse the right property as integer
var right = parseInt(document.getElementById("login_box").style.right,10)
if ( right < 10) {
document.getElementById("login_box").style.right = right + 10 + 'px';
} else {
//important -- cancel the interval after animation finished else it will run infinitely and interfere with other other functions
clearInterval(window.moveLeft)
}
}
function slider3() {
//user right here instead of left
//use the same property in other animation
var right = parseInt(document.getElementById("login_box").style.right,10)
if ( right > -570) {
document.getElementById("login_box").style.right = right - 10 + 'px';
} else {
// This is where you get stuck
// in your code the container element is hidden before animation is performed therefore you didn't see box moving to right
//hide container1 element only after entire login-box is moved to right
var label = document.getElementById("container1").style.display = "none";
clearInterval(window.moveRight)
}
}
.login-box{
width:320px;
position: absolute;
top : 0px;
margin: 0 ;
background:red;
padding:0 0 0 0 ;
height : 100px;
}
.container1{
width:100%;
height: 100%;
overflow:hidden;
display:none;
display:flex;
justify-content:flex-end;
opacity: 0.9;
}
<div class="container1" id="container1" >
<form method="post" id="myform" onsubmit="mySubmit() " style="">
<div class = "login-box" id="login_box" style=" right:-570px;">
</div>
</form>
</div>
<!-- Button for performing animation -->
<button onclick="call_slider()" >Show/Hide Login Box</button>
So I have a set of elements called .project-slide, one after the other. Some of these will have the .colour-change class, IF they do have this class they will change the background colour of the .background element when they come into view. This is what I've got so far: https://codepen.io/neal_fletcher/pen/eGmmvJ
But I'm looking to achieve something like this: http://studio.institute/clients/nike/
Scroll through the page to see the background change. So in my case what I'd want is that when a .colour-change was coming into view it would slowly animate the opacity in of the .background element, then slowly animate the opacity out as I scroll past it (animating on scroll that is).
Any suggestions on how I could achieve that would be greatly appreciated!
HTML:
<div class="project-slide fullscreen">
SLIDE ONE
</div>
<div class="project-slide fullscreen">
SLIDE TWO
</div>
<div class="project-slide fullscreen colour-change" data-bg="#EA8D02">
SLIDE THREE
</div>
<div class="project-slide fullscreen">
SLIDE TWO
</div>
<div class="project-slide fullscreen colour-change" data-bg="#cccccc">
SLIDE THREE
</div>
</div>
jQuery:
$(window).on('scroll', function () {
$('.project-slide').each(function() {
if ($(window).scrollTop() >= $(this).offset().top - ($(window).height() / 2)) {
if($(this).hasClass('colour-change')) {
var bgCol = $(this).attr('data-bg');
$('.background').css('background-color', bgCol);
} else {
}
} else {
}
});
});
Set some data-gb-color with RGB values like 255,0,0…
Calculate the currently tracked element in-viewport-height.
than get the 0..1 value of the inViewport element height and use it as the Alpha channel for the RGB color:
/**
* inViewport jQuery plugin by Roko C.B.
* http://stackoverflow.com/a/26831113/383904
* Returns a callback function with an argument holding
* the current amount of px an element is visible in viewport
* (The min returned value is 0 (element outside of viewport)
*/
;
(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i, el) {
function visPx() {
var elH = $(el).outerHeight(),
H = $(win).height(),
r = el.getBoundingClientRect(),
t = r.top,
b = r.bottom;
return cb.call(el, Math.max(0, t > 0 ? Math.min(elH, H - t) : (b < H ? b : H)), H);
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
// OK. Let's do it
var $wrap = $(".background");
$("[data-bg-color]").inViewport(function(px, winH) {
var opacity = (px - winH) / winH + 1;
if (opacity <= 0) return; // Ignore if value is 0
$wrap.css({background: "rgba(" + this.dataset.bgColor + ", " + opacity + ")"});
});
/*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
.project-slide {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.project-slide h2 {
font-weight: 100;
font-size: 10vw;
}
<div class="project-slides-wrap background">
<div class="project-slide">
<h2>when in trouble...</h2>
</div>
<div class="project-slide" data-bg-color="0,200,255">
<h2>real trouble...</h2>
</div>
<div class="project-slide">
<h2>ask...</h2>
</div>
<div class="project-slide" data-bg-color="244,128,36">
<h2>stack<b>overflow</b></h2>
</div>
</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
Looks like that effect is using two fixed divs so if you need something simple like that you can do it like this:
But if you need something more complicated use #Roko's answer.
var fixed = $(".fixed");
var fixed2 = $(".fixed2");
$( window ).scroll(function() {
var top = $( window ).scrollTop();
var opacity = (top)/300;
if( opacity > 1 )
opacity = 1;
fixed.css("opacity",opacity);
if( fixed.css('opacity') == 1 ) {
top = 0;
opacity = (top += $( window ).scrollTop()-400)/300;
if( opacity > 1 )
opacity = 1;
fixed2.css("opacity",opacity);
}
});
.fixed{
display: block;
width: 100%;
height: 200px;
background: blue;
position: fixed;
top: 0px;
left: 0px;
color: #FFF;
padding: 0px;
margin: 0px;
opacity: 0;
}
.fixed2{
display: block;
width: 100%;
height: 200px;
background: red;
position: fixed;
top: 0px;
left: 0px;
color: #FFF;
padding: 0px;
margin: 0px;
opacity: 0;
}
.container{
display: inline-block;
width: 100%;
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Scroll me!!
</div>
<div class="fixed">
</div>
<div class="fixed2">
</div>
I have a requirement, where I need to freeze the selected item from list of items in a container to top, when the selected item is in top fold of the container. and when the selected item is in bottom fold of the container, I need to stick it to the bottom.
If the selected item is in visible fold, nothing should happen. I mean the selected item should be in normal flow with other adjacent items.
I somehow managed to solve this to some extent. But when I scroll up, when the selected item is sticked above of the container, the selected item is hiding. This behavior is happening even when I scroll down, when the selected item is sticked to the bottom of the container.
Here is the Fiddle
$('.item').click(function () {
$('.item').removeClass('select').removeClass('pAbsolute');
$(this).addClass('select');
});
$('.parent').scroll(function () {
var $selected = $('.item.select');
var cTop = $selected.offset().top;
var cHeight = $selected.height();
var pHeight = $(this).height();
if (cTop < 0) {
$selected.css({
'top': $(this).scrollTop(),
'bottom': ''
}).addClass('pAbsolute');
} else if (cTop > pHeight - cHeight) {
$selected.css({
'bottom': -$(this).scrollTop(),
'top': ''
}).addClass('pAbsolute');
} else {
$selected.css({
'top': '',
'bottom': ''
}).removeClass('pAbsolute');
}
});
You have to use a consistent value to keep the initial offset relative to the container when you select it.
Then, calculate the offset and scroll value,
If cTop < 0, which means its top out of box, stick to top.
If cTop + cHeight > pHeight, which means its view is out of bottom block, set to bottom.
Else stay in position.
Edit:
When selecting a new Item, as the previous item may have .pAbsolute attr, the relative position of current item may change, but we can get the offset change by track the offset before and after those class add/remove actions.
Then we can add the missing height by change the scrollTop of the container manually.
var offset;
$('.item').click(function () {
// This is the offset in container before class change.
offset = this.offsetTop;
$('.item').removeClass('select').removeClass('pAbsolute');
$(this).addClass('select');
// Calculate the difference
var distortion = offset - this.offsetTop;
// Remove the distortion by manual scroll.
var $parent = $(this).parent();
$parent.scrollTop($parent.scrollTop() - distortion);
offset = this.offsetTop;
});
$('.parent').scroll(function () {
var $selected = $('.item.select');
var cTop = offset - $(this).scrollTop();
var cHeight = $selected.height();
var pHeight = $(this).height();
if (cTop < 0) {
$selected.css({
'top': $(this).scrollTop(),
'bottom': ''
}).addClass('pAbsolute');
} else if (cTop + cHeight > pHeight) {
$selected.css({
'bottom': -$(this).scrollTop(),
'top': ''
}).addClass('pAbsolute');
} else {
$selected.css({
'top': '',
'bottom': ''
}).removeClass('pAbsolute');
}
});
body, html {
padding: 0;
margin: 0;
}
.parent {
overflow: auto;
height: 200px;
position: relative;
}
.item {
padding: 10px 15px;
background-color: tomato;
width: 100%;
}
.item.select {
background-color: beige;
}
.pAbsolute {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="item select">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
<div class="item">31</div>
<div class="item">32</div>
<div class="item">33</div>
<div class="item">34</div>
<div class="item">35</div>
<div class="item">36</div>
<div class="item">37</div>
<div class="item">38</div>
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
</div>
This solution uses a bottom and top header who are filled in with the selected values and showed/hidden when necessary:
Working Fiddle
Javascript:
function stickItems($parent, itemClass, selectClass) {
// Attach dummy element items
$parent.prepend('<div class="' + itemClass + ' sticky top"></div>');
$parent.append('<div class="' + itemClass + ' sticky bottom"></div>');
var $items = $('.' + itemClass),
$stickyTop = $('.' + itemClass + '.sticky.top'),
$stickyBottom = $('.' + itemClass + '.sticky.bottom');
// Click event registering
$items.click(function (e) {
if (!$(e.target).hasClass('sticky')) {
$items.removeClass(selectClass);
$stickyTop.css('display', 'none');
$stickyBottom.css('display', 'none');
$(this).addClass(selectClass);
}
});
// Scroll event
$parent.scroll(function () {
var $self = $(this);
var $selected = $('.' + itemClass + '.' + selectClass);
var cTop = $selected.offset().top;
var pTop = $self.offset().top;
var cHeight = $selected.height();
var pHeight = $self.height();
if (cTop - pTop <= 0) {
$stickyTop.html($selected.html()).css({
'display': 'block',
'top': $(this).scrollTop()
});
$stickyBottom.css('display', 'none');
} else if (cTop > pTop && cTop < pTop + pHeight) {
$stickyTop.css('display', 'none');
$stickyBottom.css('display', 'none');
} else {
$stickyTop.css('display', 'none');
$stickyBottom.html($selected.html()).css({
'display': 'block',
'bottom': -$(this).scrollTop()
});
}
});
}
stickItems($('.parent'), 'item', 'select');
Css:
body, html {
padding: 0;
margin: 0;
}
body {
padding-top: 200px;
}
.parent {
overflow-x: hidden;
overflow-y: auto;
height: 200px;
position: relative;
}
.item {
padding: 10px 15px;
background-color: tomato;
}
.item.select {
background-color: beige;
}
.item.sticky {
background-color: beige;
display: none;
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
Html:
<div class="parent">
<div class="item sticky top"></div>
<div class="item select">1</div>
<div class="item">2</div>
<!-- ... -->
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
<div class="item sticky bottom"></div>
</div>