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 { .sidebar {
@include clearfix(); @include clearfix();
margin-bottom: 1em; margin-bottom: 1em;
-webkit-transform: translate3d(0, 0 , 0);
transform: translate3d(0, 0 , 0);
@include breakpoint(max-width $large) { @include breakpoint(max-width $large) {
/* fix z-index order of follow links */ /* fix z-index order of follow links */
position: relative; position: relative;
z-index: 10; z-index: 10;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} }
@include breakpoint($large) { @include breakpoint($large) {
@ -23,7 +23,7 @@
width: calc(#{$right-sidebar-width-narrow} - 1em); width: calc(#{$right-sidebar-width-narrow} - 1em);
opacity: 0.75; opacity: 0.75;
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
&:hover { &:hover {
opacity: 1; opacity: 1;
@ -32,7 +32,9 @@
&.sticky { &.sticky {
overflow-y: auto; overflow-y: auto;
/* calculate height of nav list */ /* 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); width: calc(#{$right-sidebar-width} - 1em);
} }
h2, h3, h4, h5, h6 { h2,
h3,
h4,
h5,
h6 {
margin-bottom: 0; margin-bottom: 0;
font-family: $sans-serif-narrow; font-family: $sans-serif-narrow;
} }
p, li { p,
li {
font-family: $sans-serif; font-family: $sans-serif;
font-size: $type-size-6; font-size: $type-size-6;
line-height: 1.5; line-height: 1.5;
@ -76,7 +83,6 @@
} }
.splash .sidebar__right { .splash .sidebar__right {
@include breakpoint($large) { @include breakpoint($large) {
position: relative; position: relative;
float: right; float: right;

View file

@ -24,6 +24,27 @@ $(document).ready(function() {
// FitVids init // FitVids init
$("#main").fitVids(); $("#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 // Follow menu drop down
$(".author__urls-wrapper button").on("click", function() { $(".author__urls-wrapper button").on("click", function() {
$(".author__urls").toggleClass("is--visible"); $(".author__urls").toggleClass("is--visible");

10
assets/js/main.min.js vendored

File diff suppressed because one or more lines are too long