css
.head {
width: 100%;
left: 0px;
top: 0px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height > 0) {
console.log("no 0");
$("#tt-body-index .head").animate(
{
marginTop: 0,
},
1000,
"swing"
);
} else if (height === 0) {
console.log("0");
$("#tt-body-index .head").animate(
{
marginTop: -76,
},
1000,
"swing"
);
}
});
I'm writing a script using jQuery.
When scrolling starts .head appears and tries to make scrollTop 0 disappear.
.head appearing is good, but when scrollTop is zero, it doesn't become marginTop: -76.
Use CSS transitions and animation whenever possible which is more smooth compared to jquery animations, this can be done using css transition check the below code. Also, one thing you need to trigger scroll on page load in case if the browser scrolls the page to some part from the cache.
CSS
.head {
width: 100%;
left: 0px;
top: -80px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
background-color: aqua;
transition: top 1s;
}
body.showHeader .head{
top: 0px;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height < 76) {
$('body').removeClass('showHeader')
} else {
$('body').addClass('showHeader')
}
}).scroll();
I have some divs that the user can click on, and then they expand to cover the screen. In doing so, they become fixed position.
Everything works exactly as expected in all browsers except for Safari. When on Safari, once the div is expanded, the user cannot click anything inside the div. I have buttons and links that would take the user to other pages or close the div, but it behaves as if the user never clicked anything.
Here is a link: https://toucan-sam.firebaseapp.com/
Any insight would be appreciated.
I've created a snippet below using what I believe to be the relevant code, but the snippet actually displays the intended behavior.
let $body = $('body');
let $introduction = $('#introduction');
let $sidebar = $('#sidebar');
let griffen = {
viewportHeight: $introduction.height(),
viewportWidth: $introduction.width(),
preset: false,
extrasVisible: false,
projectVisible: false,
projectOpening: false,
projectClosing: false,
mobileSize: 900,
};
let openProject = (project) => {
'use strict';
let open = () => {
let containerPosition = project.article.offset().top - window.scrollY;
let containerWidth = project.article.width();
let containerHeight = project.article.height();
project.container.css({
'height': containerHeight + 'px',
'position': 'fixed',
'top': containerPosition + 'px',
'width': containerWidth + 'px',
'z-index': '100',
});
if (project.id === 'sdot') {
project.heading.css({
'background-position': 'center 25%',
});
project.header.animate({
'padding-left': '0',
'padding-top': '20%',
}, 1000);
} else {
project.header.animate({
'padding-left': '0',
}, 1000);
}
project.container.animate({
'height': '100vh',
'top': '0',
'width': '100%',
}, 1000, () => {
project.container.addClass('full');
griffen.projectOpening = false;
});
};
$body.addClass('stuck');
$('html').addClass('stuck');
project.tabButton.attr('aria-selected', 'true');
project.content.attr('aria-hidden', 'false');
let verticalPosition = project.article.offset().top - (griffen.viewportHeight / 2) + (project.article.height() / 2);
let diff = Math.round(verticalPosition) - window.scrollY;
console.log(diff);
if (Math.abs(diff) > 50) {
let doneScrolling = false;
$('html, body').animate({
'scrollTop': verticalPosition
}, 500, () => {
if (!doneScrolling) {
doneScrolling = true;
window.setTimeout(() => {
open();
}, 500);
}
});
} else {
open();
}
};
let closeProject = (project) => {
'use strict';
let close = () => {
let containerPosition = project.article.offset().top - window.scrollY;
let containerWidth = project.article.width();
let containerHeight = project.article.height();
project.container.removeClass('full');
project.container.animate({
'height': containerHeight + 'px',
'top': containerPosition + 'px',
'width': containerWidth + 'px',
}, 1000, () => {
project.container.css({
'height': '',
'position': '',
'top': '',
'width': '',
'z-index': '',
});
$body.removeClass('stuck');
$('html').removeClass('stuck');
griffen.projectClosing = false;
griffen.projectVisible = false;
});
if (project.id === 'sdot') {
project.heading.css({
'background-position': '',
});
if (griffen.viewportWidth >= griffen.mobileSize) {
project.header.animate({
'padding-left': '250px',
'padding-top': '0',
}, 1000, () => {
project.header.css({
'padding-left': '',
'padding-top': '',
});
});
} else {
project.header.animate({
'padding-left': '0',
'padding-top': '0',
}, 1000, () => {
project.header.css({
'padding-left': '',
'padding-top': '',
});
});
}
} else {
if (griffen.viewportWidth >= griffen.mobileSize) {
project.header.animate({
'padding-left': '250px',
}, 1000, () => {
project.header.css({
'padding-left': '',
});
});
}
}
};
if (project.container.scrollTop() !== 0) {
project.container.animate({
'scrollTop': 0,
}, 500, () => {
close();
});
} else {
close();
}
};
let toggleProject = (project) => {
'use strict';
if (griffen.projectVisible === false) {
if (griffen.projectOpening === false && griffen.projectClosing === false) {
griffen.projectOpening = true;
griffen.projectVisible = true;
openProject(project);
}
} else {
if (griffen.projectOpening === false && griffen.projectClosing === false) {
griffen.projectClosing = true;
closeProject(project);
}
}
};
let inciteWater = {
article: $('#incite-water'),
container: $('#incite-water-container'),
header: $('#incite-water-header'),
heading: $('#incite-water-heading'),
content: $('#incite-water-content'),
tabButton: $('#incite-water-button'),
id: 'incitewater',
};
console.log(inciteWater);
inciteWater.tabButton.click((e) => {
'use strict';
e.preventDefault();
$('.project-link').attr('aria-selected', 'false');
$('[role="tabpanel"]').attr('aria-hidden', 'true');
toggleProject(inciteWater);
});
let $closeInciteWater = $('#close-incite-water-button');
$closeInciteWater.click((e) => {
'use strict';
e.preventDefault();
$('.project-link').attr('aria-selected', 'false');
$('[role="tabpanel"]').attr('aria-hidden', 'true');
closeProject(inciteWater);
});
#introduction,
#sidebar {
box-sizing: border-box;
width: 100vw;
height: 100vh;
position: fixed;
opacity: 0;
z-index: -1;
}
.project,
.project-container {
overflow: hidden;
background-color: #fff
}
section>header {
text-align: center
}
section p {
font-size: 1.2em;
font-weight: 400;
line-height: 2;
margin: 1em 0
}
.project-date,
.project-header {
font-weight: 300;
text-transform: uppercase
}
.image {
font-size: 1em;
font-style: italic;
text-align: center
}
.icon,
.project-header {
-webkit-box-align: center;
display: -webkit-box
}
.project-content-title,
.project-header h3 {
font-family: "Krona One", "IBM Plex Sans", "Hiragino Maru Gothic ProN", sans-serif;
font-size: 1.6em
}
.project {
background-size: cover;
height: 40vh;
min-height: 250px;
position: relative;
width: 100%
}
.project-container,
.project-container>header {
height: 100%;
position: relative;
max-height: 100vh;
width: 100%
}
.project-container {
-webkit-overflow-scrolling: touch;
right: 0
}
.project-container>header {
overflow: hidden
}
.project-container.full .project-header,
.project-link {
position: absolute
}
.project-container.full {
/* overflow-x:hidden; */
;
overflow-y: scroll
}
.project-link {
clip: rect(auto, auto, auto, auto);
bottom: 0;
left: 0;
right: 0;
top: 0
}
.project-header {
-ms-flex-align: center;
align-items: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
height: 60vh;
right: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-height: 100vh;
position: fixed;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
-webkit-transition: .25s opacity, .25s visibility, .25s top;
-o-transition: .25s opacity, .25s visibility, .25s top;
transition: .25s opacity, .25s visibility, .25s top;
width: 100%
}
#contact,
#contact-form {
-webkit-box-orient: vertical;
-webkit-box-direction: normal
}
.project-header h3 {
text-align: center
}
.project-pre-title {
margin: 0 0 2em;
position: relative
}
.project-pre-title::after {
background-color: #fff;
bottom: -1em;
content: '';
height: 1px;
left: 50%;
position: absolute;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
width: 8em
}
.project-content {
margin: 0 auto;
max-width: 960px;
padding: 2em;
position: relative;
z-index: 150;
}
.project-content-intro {
margin-bottom: 2em
}
.project-content-title {
text-transform: uppercase
}
.project-date {
margin: .5em 0
}
.close-project-button-dang {
cursor: pointer;
position: absolute;
right: 3em;
top: 3em;
width: 3em;
height: 3em;
background-image: url(../icons/cancel.svg);
background-size: cover;
opacity: 0;
-webkit-transition: .5s opacity;
-o-transition: .5s opacity;
transition: .5s opacity
}
#incite-water-heading {
background-image: url(https://toucan-sam.firebaseapp.com/assets/images/water-drops.jpeg);
background-position: center;
background-size: cover
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="introduction">
INTRODUCTION
</div>
<div id="sidebar">
SIDEBAR
</div>
<article class="project" id="incite-water">
<div class="project-container" id="incite-water-container">
<header id="incite-water-heading">
<a href="#incite-water" tabindex="0" class="project-link" id="incite-water-button" role="tab" aria-controls="incite-water-content" data-project="inciteWater">
<div class="project-header" id="incite-water-header">
<h3>Incite Water</h3>
<span class="project-pre-title">Web Design & Development</span>
</div>
</a>
</header>
<div class="project-content" tabindex="0" id="incite-water-content" aria-hidden="true" role="tabpanel" aria-labelledby="incite-water-button">
<div class="project-content-intro">
<div class="project-content-title">Incite Water</div>
<div class="project-date">October 2017 – March 2018</div>
</div>
<p>This year, for the Alaska Airlines Environmental Innovation Challenge, I worked on a project called Incite Water. Our team
was comprised of peers from various departments and the goal was to create a simple yet powerful interface that would encourage people to save water. We hoped to do this by demonstrating how much money people could personally save while mitigating
the potential environmental impacts of wasting water.</p>
<p>For this project, I worked as the sole web developer. I created the interface of the site as well as the background connections with our servers. In a small group, we programmed the “calculator” first using client-side JavaScript. I then implemented
the calculation using Node.js to run server-side to protect some sensitive information from exposure and to allow for easier implementation with the Firebase platform used to host the project.</p>
<p>My role went beyond web development and extended to providing direction for our technology-based decisions and assessing feasibility. I advised we use Google’s Firebase platform to take advantage the free low-traffic hosting and integration with
various database structures and cloud computing functions that enabled the quick prototyping of the product.</p>
<p>Though we chose to go with a high-fidelity prototype, it is still a prototype. We hoped that by presenting a more realized product to judges our vision would be more effectively conveyed. Because it is still an early prototype, we need to perform
additional user research and usability testing to determine our next course of action. I anticipate further adjustments to our calculator as well as increased outreach and awareness campaigns to involve more members of the public.</p>
<p>Visit Incite Water</p>
← Return<span class="sr-only"> to the main page</span>
</div>
</div>
</article>
I have a circle that expands and contracts, but there is a glitch at about 10px - 20px. Look carefully and you will see it "twitch".
It's as if the the circle has some alloted space and then "breaks" out of it.
https://jsfiddle.net/nj2u9bhy/4/
$A.Class.create('test',{
Name: 'Animator',
E: {
timer: '#timer'
},
init: function(){
this.animate();
},
animate: function(){
var s = this.E.timer.style;
var step = 2;
var state = 'up';
$A.setInterval(function(){
$A.log(step);
s.height = s.width = step + 'px';
s.borderRadius = step/2 + 'px';
if(state === 'up') {
step += 2;
}
if(state === 'down') {
step -= 2;
}
if(step === 2) {
state = 'up';
}
if(step === 42){
state = 'down';
}
}, 200);
}
});
I tried explicitly giving it space here:
https://jsfiddle.net/nj2u9bhy/5/
but same effect.
That is because it is an inline block element which vertical aligns to bottom so give it vertical align top solve the issue, or change it to a block element.
Updated fiddle
#timer{
position: relative;
top: 20px;
left: 20px;
display: inline-block;
width: 32px;
height: 32px;
vertical-align: top;
background-color: black;
border-radius: 16px;
}
And it can be easily done using CSS animation which will give a smoother transition (note that CSS animations are not supported in IE 9 and earlier)
#timer{
position: relative;
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
background-color: black;
border-radius: 50%;
animation: zoom 3s linear infinite;
}
#keyframes zoom {
0% {width: 0; height: 0;}
50% {width: 32px; height: 32px;}
100% {width: 0; height: 0;}
}
<div id="timer">
</div>
I have a strange issue that only affects Firefox.
In my dev website, I have this jQuery code:
jQuery('body').on('click', '.sidebar-toggle', function(e){
if (sidebarStatus == "OFF") {
jQuery('.panel-sidebar').animate({
marginLeft: "0px"
}, 400);
jQuery('.products-listing-contents').animate({
marginLeft: "200px",
width: '-=200px',
'padding-right' : 0
}, 400);
setTimeout(function(){
jQuery('.products-listing-contents').css("width","calc(100% - 200px)");
}, 420);
sidebarStatus = "ON";
}
else {
jQuery('.panel-sidebar').animate({
marginLeft: "-184px"
}, 400);
jQuery('.products-listing-contents').animate({
marginLeft: "15px",
width: '100%',
'padding-right' : "15px"
}, 400);
sidebarStatus = "OFF";
}
setCookie('sidebarStatus', sidebarStatus, 9999999);
});
What it basically does is pushing a left sidebar to the left and right while adjusting the content width that appears to the left of it.
It works fine in IE11 and Chrome, but in FF the content area jumps to the bottom and back up whenever I click the slide toggle.
I have been trying to adjust the numbers, but that doesn't help. Any help would be greatly appreciated. Thank you.
I had issues with setTimeout in FF before. In your case try to avoid using setTimeout and it might just work.
You don't have to call a setTimeout to invoke something after the Animation ends. There is a built in callback for that. You can write a callback function with a comma after the timedelay. Check if that helps. Even if it doesn't help with your problem doing like given below is definitely better practice than using an async like setTimeout.
Like this:
if (sidebarStatus == "OFF") {
jQuery('.panel-sidebar').animate({
marginLeft: "0px"
}, 400);
jQuery('.products-listing-contents').animate({
marginLeft: "200px",
width: '-=200px',
'padding-right' : 0
}, 400, function(){
jQuery('.products-listing-contents').css("width","calc(100% - 200px)");
});
sidebarStatus = "ON";
}
Use css transitions. Much easier and cleaner than using jQuery.
$("#sidebar-container").on("click", function () {
$(this).toggleClass('maximized-sidebar-container');
$("#content-container").toggleClass('minimized-content-container');
});
#application-container {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow: auto;
}
#sidebar-container {
position: absolute;
left: -160px;
width: 170px;
height:400px;
background-color: #0F0;
overflow: hidden;
transition: 350ms left ease-out;
z-index: 3;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.maximized-sidebar-container {
left: 0px !important;
}
#content-container {
position: absolute;
right: 0px;
left: 10px;
height: 400px;
background-color: #808080;
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
transition: 350ms left ease-out;
z-index: 0;
}
.minimized-content-container {
left: 170px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="application-container">
<div id="sidebar-container"></div>
<div id="content-container">Content</div>
</div>
I have been trying to set a div's position to fixed when a user has scrolled far enough. I noticed that when the div's position is set to fixed the width is not the same as the parent elemnt. How can I keep the width of the div with position: fixed the same as the parent element?
In this example I want the bottom div to be the same width as the yellow box once position:fixed is set.
http://jsfiddle.net/BYJPB/
Here's my HTML:
<header>
<div class="filler-space">
Filler Space
</div>
<div class="toolbar">
<div class="current-article">
<div class="progress-bar"></div>
My article
</div>
</div>
</header>
Here's my CSS:
body {
padding:0 10px;
height: 1000px;
}
.filler-space {
background-color: yellow;
border:1px solid #000000;
height: 140px;
}
.toolbar {
border: 1px solid black;
}
.current-article {
font-weight: 600;
height: 100%;
line-height: 40px;
overflow: hidden;
width: 100%;
z-index: -1;
}
.progress-bar {
position: absolute;
}
.prog .progress-bar {
background: none repeat scroll 0 0 #F2F4F7;
bottom: 0;
height: 100%;
left: 0;
margin: 0 -10px 0 -10px;
overflow: hidden;
right: 0;
top: 0;
transition: width 0.1s ease 0s;
z-index: -1;
width: 100%;
}
Here is my JavaScript:
var $toolbar = $('.toolbar');
var $window = $(window);
var $header = $('header');
$(document).scroll(function() {
var scrollTop = $window.scrollTop();
if ( scrollTop > 150) {
$toolbar.css({
'position' : 'fixed',
'top' : 0
});
$header.addClass('prog');
}
else {
$toolbar.css({
'position' : 'static',
'top' : 0
});
$header.removeClass('prog');
}
});
Update your js, I dont understand your requirements, but i think this is what you are looking for.
if ( scrollTop > 150) {
$toolbar.css({
'position' : 'fixed',
'top' : 0,
'width':$header.width()
});
$header.addClass('prog');
}
else {
$toolbar.css({
'position' : 'static',
'top' : 0
});
$header.removeClass('prog');
}