Fix stuck sidebar when resizing viewport

Close #1447
This commit is contained in:
Michael Rose 2018-01-03 14:20:41 -05:00
parent 0db0f31953
commit e2b50a355f
3 changed files with 40 additions and 13 deletions

View file

@ -9,13 +9,13 @@
.sidebar {
@include clearfix();
margin-bottom: 1em;
-webkit-transform: translate3d(0, 0 , 0);
transform: translate3d(0, 0 , 0);
@include breakpoint(max-width $large) {
/* fix z-index order of follow links */
position: relative;
z-index: 10;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@include breakpoint($large) {
@ -23,7 +23,7 @@
width: calc(#{$right-sidebar-width-narrow} - 1em);
opacity: 0.75;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
&:hover {
opacity: 1;
@ -32,7 +32,9 @@
&.sticky {
overflow-y: auto;
/* calculate height of nav list */
height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
height: calc(
100vh - 90px - 2em
); // viewport height - approx. masthead height - main content top margin
}
}
@ -40,12 +42,17 @@
width: calc(#{$right-sidebar-width} - 1em);
}
h2, h3, h4, h5, h6 {
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 0;
font-family: $sans-serif-narrow;
}
p, li {
p,
li {
font-family: $sans-serif;
font-size: $type-size-6;
line-height: 1.5;
@ -76,7 +83,6 @@
}
.splash .sidebar__right {
@include breakpoint($large) {
position: relative;
float: right;
@ -265,4 +271,4 @@
text-decoration: underline;
}
}
}
}

View file

@ -24,6 +24,27 @@ $(document).ready(function() {
// FitVids init
$("#main").fitVids();
// Sticky sidebar
var stickySideBar = function() {
var show =
$(".author__urls-wrapper button").length === 0
? $(window).width() > 1024 // width should match $large Sass variable
: !$(".author__urls-wrapper button").is(":visible");
if (show) {
// fix
$(".sidebar").addClass("sticky");
} else {
// unfix
$(".sidebar").removeClass("sticky");
}
};
stickySideBar();
$(window).resize(function() {
stickySideBar();
});
// Follow menu drop down
$(".author__urls-wrapper button").on("click", function() {
$(".author__urls").toggleClass("is--visible");

10
assets/js/main.min.js vendored

File diff suppressed because one or more lines are too long