I am trying to get a category bar for blogs to remain on screen on scroll and remain on the right side. The problem is that my current method is making the bar switch the right side AND shrink down when you scroll past the first article. I am using Bootstrap version 4 in my styles, so it probably has something to do with the grid system.
I searched online and found a question referring to JSS with the link included below but I am having a hard time implementing a solution with it. The documentation isn't that great so its hard to figure out if I am activating it. Github found at https://github.com/dvtng/jss.
var prevWidth = $(window).width();
if ($(window).width() > 767) {
$('ul.nav li.dropdown').hover(function() {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('.navbar .dropdown > a').click(function() {
"use strict";
location.href = this.href;
});
}
var $window = $(window),
$stickydiv = $('#cat-div'),
$divTop = $stickydiv.offset().top,
$pos = $stickydiv.position(),
$posleft = $pos.left;
/*jss.set('.sticky', {
'left': $posleft
});*/
$window.scroll(function() {
$stickydiv.toggleClass('sticky', $window.scrollTop() > $divTop);
});
window.onresize = function() {
"use strict";
if ($(window).width() < 767 && prevWidth > 767) {
location.reload();
setNewHeight();
} else if ($(window).width() > 767 && prevWidth < 767) {
location.reload();
setNewHeight();
}
/* $pos = $stickydiv.position();
$posleft = $pos.left;
jss.set('.sticky', {
'left': $posleft
});*/
};
function setNewHeight() {
"use strict";
prevWidth = $(window).width();
}
#charset "utf-8";
/* CSS Document */
.title {
font-family: vatican;
}
.soph {
font-family: Sophisto;
}
.of-auto {
overflow: auto;
}
#cat-div.sticky {
position: fixed;
top: 63px;
}
div.splat {
background-color: rgba(0, 0, 0, 0.3);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2 class="title">Explore The Blog</h2>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Some Title <small>February 2, 2018</small></h3>
<p class="soph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</div>
<div class="col-md-2 well splat" id="cat-div">
<nav class="nav flex-column">
Category
Category
Category
Category
</nav>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Another Title <small>February 1, 2018</small></h3>
<p class="soph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Final Title <small>January 31, 2018</small></h3>
<p class="soph">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder
of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone
who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious
physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the
other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee</p>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Another Title <small>February 1, 2018</small></h3>
<p class="soph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Final Title <small>January 31, 2018</small></h3>
<p class="soph">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder
of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone
who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious
physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On
the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee</p>
</div>
</div>
</div>
</div>
So first let's acknowledge the basic problem you are going to have to overcome here: when your page first loads, your category bar's size and position is based on it being a child element of a parent that's display: flex. But as soon as you scroll down, it becomes position: fixed, meaning it is taken out of the flow of the document. As such, its position and size will change because it is no longer the child of a flex element.
So what you really need to do is one of two things. Either:
Make the category bar position: fixed from the start, so you don't have to worry about it looking different when the page first loads vs when you scroll down. Or,
Mimic its initial style once it becomes fixed, so it looks the same.
Mimicing its position is relatively easy with just a couple extra CSS rules. For example, on desktop, we can see that being 16.666666% wide, as the .col-md-2 class dictates, results in the bar being 190px wide. So your .stuck class can include width: 190px to make sure the width is maintained.
Then we can calculate its distance from the right side of the page and use that in our .stuck class as well. Since .container takes up 1140px of our page, that means there's (100% - 1140px) of space left on the sides of the document. Divide that by two, and you get the distance from the right of the screen that your sidebar is.
Putting it together, you get this:
#cat-div.sticky {
position: fixed;
top: 63px;
right: calc(calc(100% - 1140px) / 2); /* new */
width: 190px; /* new */
}
Now our bar will stay in place when you scroll down.
The height problem is trickier to solve. Flexbox will make your sidebar expand to as tall as the paragraph next to it. That's fine as long as your paragraph is taller than your sidebar, but what if it's not? Probably better to give it a fixed height that will contain its links, so it doesn't appear to shrink when you scroll down.
div.splat {
background-color: rgba(0, 0, 0, 0.3);
height: 200px; /* new */
}
The last thing you may want to change is how the sticking works. If you want it to stick to the top of the screen as you scroll down, change your top value on #cat-div.sticky from 63px to 0, and you'll be good to go. If you want it to appear to stay the same distance from the top of the screen, you'll need to find its top value when the page first loads (similar to how we found its width and right position) and set the top value to that amount when its stuck in place. Then you need to change the JavaScript to add the stuck class immediately if you scroll even 1px, rather than waiting til it hits the top of the screen.
So this:
$stickydiv.toggleClass('sticky', $window.scrollTop() > $divTop);
Becomes:
$stickydiv.toggleClass('sticky', $window.scrollTop() > 0);
And you can also get rid of the $divTop variable then, since you won't need it any more.
Putting it all together:
var prevWidth = $(window).width();
if ($(window).width() > 767) {
$('ul.nav li.dropdown').hover(function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('.navbar .dropdown > a').click(function(){
"use strict";
location.href = this.href;
});
}
var $window = $(window),
$stickydiv = $('#cat-div'),
//$divTop = $stickydiv.offset().top,
$pos = $stickydiv.position(),
$posleft = $pos.left;
/*jss.set('.sticky', {
'left': $posleft
});*/
$window.scroll(function () {
$stickydiv.toggleClass('sticky', $window.scrollTop() > 0);
});
window.onresize = function(){
"use strict";
if ($(window).width() < 767 && prevWidth > 767) {
location.reload();
setNewHeight();
} else if ($(window).width() > 767 && prevWidth < 767) {
location.reload();
setNewHeight();
}
/* $pos = $stickydiv.position();
$posleft = $pos.left;
jss.set('.sticky', {
'left': $posleft
});*/
};
function setNewHeight() {
"use strict";
prevWidth = $(window).width();
}
#charset "utf-8";
/* CSS Document */
.title {
font-family: vatican;
}
.soph {
font-family: Sophisto;
}
.of-auto {
overflow: auto;
}
#cat-div.sticky {
position: fixed;
top: 46px;
right: calc(calc(100% - 1140px) / 2);
width: 190px;
}
div.splat {
background-color: rgba(0, 0, 0, 0.3);
height: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2 class="title">Explore The Blog</h2>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Some Title <small>February 2, 2018</small></h3>
<p class="soph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</div>
<div class="col-md-2 well splat" id="cat-div">
<nav class="nav flex-column">
Category
Category
Category
Category
</nav>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Another Title <small>February 1, 2018</small></h3>
<p class="soph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Final Title <small>January 31, 2018</small></h3>
<p class="soph">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee</p>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Another Title <small>February 1, 2018</small></h3>
<p class="soph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Final Title <small>January 31, 2018</small></h3>
<p class="soph">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee</p>
</div>
</div>
</div>
</div>
Look at your menu:
<div class="col-md-2 well splat" id="cat-div">
<nav class="nav flex-column">
Category
Category
Category
Category
</nav>
</div>
You are basically taking whole col-md-2 from your grid and you are trying to make it fixed.
If you really just want to make the navigation sticky to the right side of the screen all you have to do is set right: 0; in your CSS.
However, I would advise you to change your page structure a little.
var prevWidth = $(window).width();
if ($(window).width() > 767) {
$('ul.nav li.dropdown').hover(function() {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('.navbar .dropdown > a').click(function() {
"use strict";
location.href = this.href;
});
}
var $window = $(window),
$stickydiv = $('#cat-div'),
$divTop = $stickydiv.offset().top,
$pos = $stickydiv.position(),
$posleft = $pos.left;
/*jss.set('.sticky', {
'left': $posleft
});*/
$window.scroll(function() {
$stickydiv.toggleClass('sticky', $window.scrollTop() > $divTop);
});
window.onresize = function() {
"use strict";
if ($(window).width() < 767 && prevWidth > 767) {
location.reload();
setNewHeight();
} else if ($(window).width() > 767 && prevWidth < 767) {
location.reload();
setNewHeight();
}
/* $pos = $stickydiv.position();
$posleft = $pos.left;
jss.set('.sticky', {
'left': $posleft
});*/
};
function setNewHeight() {
"use strict";
prevWidth = $(window).width();
}
#charset "utf-8";
/* CSS Document */
.title {
font-family: vatican;
}
.soph {
font-family: Sophisto;
}
.of-auto {
overflow: auto;
}
#cat-div.sticky {
position: fixed;
top: 63px;
right: 0;
}
div.splat {
background-color: rgba(0, 0, 0, 0.3);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2 class="title">Explore The Blog</h2>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Some Title <small>February 2, 2018</small></h3>
<p class="soph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</div>
<div class="col-md-2 well splat" id="cat-div">
<nav class="nav flex-column">
Category
Category
Category
Category
</nav>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Another Title <small>February 1, 2018</small></h3>
<p class="soph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Final Title <small>January 31, 2018</small></h3>
<p class="soph">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder
of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone
who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious
physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the
other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee</p>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Another Title <small>February 1, 2018</small></h3>
<p class="soph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="well of-auto">
<h3 class="title">Final Title <small>January 31, 2018</small></h3>
<p class="soph">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder
of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone
who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious
physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On
the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee</p>
</div>
</div>
</div>
</div>
this is quite difficult to explain, but I am looking for a browsers scrollbar to control a sites content. A good example of what I am after can be seen here So as you can see, when you get to the about section, to scroll no longer controls the page but the content within that section. I have looked at the code but it is not that reabible.
Starting from scratch, what would be the best way to achieve this type of effect? I have set up a little JSFiddle which could be used for testing. It just contains a basic section with quite a lot of content.
<section id="hero" class="vertical-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>
Some Title
</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</p>
<p>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</p>
</div>
</div>
</div>
</section>
It also has a portfolio slider section and it would be ideal if it could also work with the vertical slides.
Thanks for the input
In the future, it will be as simple as this (you'll need firefox, safari or chrome with a flag enabled for it to work now)
body {
margin: 0;
}
.sticky-titles {} .sticky-titles .pane {
width: 100%;
min-height: 100wh;
display: flex;
}
.pane-half {
width: 50%;
min-height: 100vh;
padding: 10px;
}
.pane .right {
min-height: 150vh;
}
.pane .left {
max-height: 100vh;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.pane:nth-child(odd) .left {
background: tomato;
}
.pane:nth-child(even) .left {
background: #333;
color: #CCC;
}
.pane:nth-child(odd) .right {
background: #AFA;
}
.pane:nth-child(even) .right {
background: #CCC;
color: #333;
}
<div class="sticky-titles">
<div class="pane">
<div class="left pane-half">
<h2>#1</h2>
</div>
<div class="right pane-half">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum interdum pellentesque. Vivamus dictum eleifend dui, a faucibus enim. Aenean iaculis hendrerit accumsan. Etiam non purus et neque ornare aliquet. Morbi bibendum libero vehicula
arcu tristique, ac lacinia nisl faucibus. Phasellus tempor, velit id convallis fringilla, mauris ante tempor risus, ut cursus turpis nibh non eros. Integer quis quam ut felis hendrerit laoreet. Aenean pulvinar accumsan purus. Sed posuere arcu
nunc, non aliquam quam bibendum id. Aenean nec massa sed purus varius tempus. Vivamus vitae neque rhoncus, accumsan magna ac, ullamcorper risus. Nam non ligula id ligula congue tristique. Phasellus tristique diam a lectus feugiat pretium. Aliquam
ex magna, convallis nec mollis eget, lacinia dignissim purus. Etiam consectetur sit amet mauris quis pulvinar.
</p>
</div>
</div>
<div class="pane">
<div class="left pane-half">
<h2>#2</h2>
</div>
<div class="right pane-half">
<p>
Fusce consequat et sem a vestibulum. Donec dictum molestie nibh, ac ullamcorper justo sodales quis. Aliquam odio libero, efficitur vel ante non, dapibus viverra dui. Duis sollicitudin imperdiet nunc sed pretium. Duis sed elementum felis. Sed commodo hendrerit
eros, vel consequat ipsum iaculis sit amet. Fusce tristique nisl ut felis tincidunt, vel dignissim purus mattis.
</p>
</div>
</div>
<div class="pane">
<div class="left pane-half">
<h2>#3</h2>
</div>
<div class="right pane-half">
<p>
Pellentesque cursus dapibus eros, sit amet aliquet felis bibendum nec. Duis pretium velit a enim lobortis, sit amet dignissim massa ultricies. Phasellus convallis erat tempus mi porta efficitur. Vivamus hendrerit lacus nunc, ac consectetur nulla auctor
non. Duis quis ante nec est pharetra efficitur. Sed ultricies, metus sit amet porta porttitor, neque nulla suscipit dolor, et placerat ligula arcu id diam. Sed semper, neque blandit fermentum bibendum, nunc libero pellentesque elit, luctus tempor
risus purus eu felis. Etiam leo arcu, egestas ut felis ut, rhoncus ultricies nulla. Nulla facilisi. Integer a nulla ligula. Phasellus porttitor orci a neque posuere pellentesque. Curabitur quam lacus, fermentum at eleifend eu, dapibus quis felis.
Sed rutrum eget mauris sed porta. Mauris porttitor placerat mi, et cursus lectus commodo consectetur. Quisque tincidunt aliquam massa vel sagittis. Duis a sem tempus, cursus lectus sed, venenatis orci.
</p>
</div>
</div>
</div>
At the moment it can't be used in many places, but as people want it more and more, browser vendors are sure to pick it up. You can keep and eye on the support here
when you get to the about section, to scroll no longer controls the
page but the content within that section.
Alternatively, the scroll does still control the page, but the left hand panel has position: fixed applied to it dynamically until the window's scroll bar is scrolled down far enough - after which point the position: fixed style is removed and the left-hand panel has a margin-top applied to it instead.
Starting from scratch, what would be the best way to achieve this type
of effect?
Track the vertical position of the window scrollbar via a scroll event listener;
When the scrollbar reaches a certain y-coordinate, dynamically apply position: fixed; top: 0; to the left-hand panel;
When the scrollbar reaches a second (lower) y-coordinate, remove the position style declaration and dynamically apply a margin-top style declaration;
Ensure that when the page is being scrolled up, the process happens in reverse: first the margin-top is applied, then removed and replaced with the position style declaration, then, finally, the latter is removed as well.
I have a big paragraph of text flowing into a CSS multicolumn layout stretching, say, two, three, or four columns using CSS hyphening. At some point, one of the column's text needs to be ended earlier in order to allow the rest of the paragraph to start at the top of the second column.
Is there any way we can simply set a <column-break> to start the rest of the text at the top of the next column?
Currently I'm stuffing the column (that needs the column-break) with a lot of <br>s to lengthen the column in HTML in order to achieve the effect.
Furthermore, whenever something is changed in either of the columns, the amount of <br> stuffing falls short and needs to be reassessed.
#multicolumn{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
<div id="multicolumn">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
<br>
<br>
<br>
<br>
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
See my JSFiddle.
Is there any way to "end" the first column elegantly and tell the browser to start the rest of the content in the next columns?
5. Column breaks
When content is laid out in multiple columns, the user agent must
determine where column breaks are placed. The problem of breaking
content into columns is similar to breaking content into pages.
Three new properties are introduced to allow column breaks to be
described in the same properties as page breaks: ‘break-before’,
‘break-after’, and ‘break-inside’. These properties take the
same values as ‘page-break-before’, ‘page-break-after’, and
‘page-break-inside’ [CSS21]. In addition, some new keyword
values are added.
These properties describe page/column break behavior
before/after/inside the generated box. These values are normatively
defined in [CSS21]:
auto: Neither force nor forbid a page/column break before (after, inside) the generated box.
always: Always force a page break before (after) the generated box.
avoid: Avoid a page/column break before (after, inside) the generated box.
left: Force one or two page breaks before (after) the generated box so that the next page is formatted as a left page.
right: Force one or two page breaks before (after) the generated box so that the next page is formatted as a right page.
This specification adds the following new values:
page: Always force a page break before (after) the generated box.
column: Always force a column break before (after) the generated box.
avoid-page: Avoid a page break before (after, inside) the generated box.
avoid-column: Avoid a column break before (after, inside) the generated box.
Therefore, you could use something like
#multicolumn {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.column {
break-before: column;
break-after: column;
}
<div id="multicolumn">
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
However, only Internet Explorer 10+ and Opera 11.10-12.1 seem to support those properties.
One way to tackle this would be to actually wrap your text in paragraphs (p tags), as you should do for semantics as well, and not allow your 2nd paragraph to break, given it is never longer then 1 column.
This can be achieved by using the break-inside CSS property.
https://developer.mozilla.org/en/docs/Web/CSS/break-inside
Code example based on your snippet:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700);
#multicolumn {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
}
p {
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0 0 1.4em;
}
p:nth-of-type(2) {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
<div id="multicolumn">
<p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
<p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
Use the <p> tags to distinguish between paragraphs.
<div id="multicolumn">
<p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam.</p>
<div id="filler"></div>
<p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor
cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
</div>
And the CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#multicolumn{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
#filler {
float: left;
position: relative;
background-color: #f00;
height: 120px;
width: 50%;
http://jsfiddle.net/mnz2h9hr/2/
The <p> tags keeps the paragraphs together, and the 'filler' (marked in red) keeps an area free of text.
For your situation, the best solution is to use a grid system.
Please run the snippet in Full Page view.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush;">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col-sm-6" style="background-color:lavender;">
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
</div>
</div>
</body>
</html>
If you are able to wrap each column in a div, then the most elegant solution would be to use a bootstrap style grid.
.row {
margin: 0 -15px;
}
.column {
box-sizing: border-box;
float: left;
padding: 0 15px;
width: 50%;
}
<div id=row">
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
If you are using a wysiwyg to enter copy, then you must have access to a source button to wrap your columns in divs. Then using the above code, columns become very simple; and easily made responsive.
Elaborating more on #Oriol answer you can set the width so first column will always use left half.
#multicolumn {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.column:nth-of-type(1) {
width:50%;
}
<div id="multicolumn">
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
Technically not the CSS multicolumn feature you are targeting to column-break in, but this looks visually similar.
.column {
width : 46%;
margin: 0% 2%;
height: 100%;
float: left;
}
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
Here's the jsFiddle : http://jsfiddle.net/Vbr9d/242/