Fix nav bar on top on scroll down - javascript

I tried to achieve something similar to here
but for me its not fixing at top on scrolling down.Someone please provide any example or resources to achieve this feature.
.features-switcher.fixed:after,
{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: fixed;
z-index: 101;
width: 100%;
height: 65px;
top: 0;
left: 0;
opacity: 1
}
For my nav-bar div class features-switcher:
$(window).scroll(function () {
console.log("scrolled down");
console.log($(window).scrollTop());
if ($(window).scrollTop() > 150) {
$('features-switcher').css('top', 0);
}
}
);

You are missing a .
$('features-switcher').css('top', 0);
Should be...
$('.features-switcher').css('top', 0);

Related

Translate on scroll in jquery

I need help regarding the translate-animate property.
There's an image I want to translate in the upward direction when I scroll down on the page.
Now I know I can use the property translateY(px) to move it but then I don't know how to translateY while scrolling.
I want to make my webpage look like this
https://www.apple.com/uk/iphone/
As you can see when you scroll down the image translates upwards with a smooth flow.
I need a code such that I can translate my image upward smoothly on scrolling down.
P.s- This is my first question, sorry if I am not clear.
This is rather cheap parallax effect that I made myself but does not require any special magic to work... Link to my original demo page
let $scrollPrev = 0;
const $viewBottom = () => $(window).scrollTop() + $(window).innerHeight(),
$parallaxIllusion = () => {
const $pxTop = $(".parallaxTop"),
$pxMid = $(".parallaxMiddle"),
$pxBottom = $(".parallaxBottom"),
$scrollCurr = $viewBottom(),
$bodyTop = $("body").offset().top,
$bodyBottom = $bodyTop + $("body").outerHeight(true),
$pxspeed = $scrollCurr - $bodyTop;
if ($bodyTop > 0 && $viewBottom() > $bodyTop && $(window).scrollTop() <= $bodyBottom) {
$pxTop.css({
"top": 40 + -$pxspeed / 4
});
$pxMid.css({
"top": $pxspeed / 2
});
$pxBottom.css({
"top": ($pxspeed / 4)
});
$scrollPrev = $scrollCurr;
};
};
$(document).ready(() => {
$(window).scroll(() => {
$parallaxIllusion();
});
});
body{
height:700px;
}
.parallaxTop {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxHand.png') center center / cover no-repeat;
position: absolute;
left: 50%;
-ms-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
width: 403px;
height: 298px;
z-index: 2;
}
.parallaxMiddle {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxCaps.png') center center / cover no-repeat;
position: absolute;
right: 50%;
-ms-transform: translate(50%, 0);
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
width: 109px;
height: 117px;
z-index: 4;
}
.parallaxBottom {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxBeer.png') center center / cover no-repeat;
position: absolute;
right: 50%;
-ms-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
width: 406px;
height: 443px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="parallaxTop"></div>
<div class="parallaxMiddle"></div>
<div class="parallaxBottom"></div>
</body>
Note that you can edit the code to peak 1 image. Speed or direction is controlled at if level.

position fixed not working on sticky menu

I added this class ".sticky" by javascript to the nav but sticky menu not working correctly.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
-webkit-transform: none;
transform: none;
}
javascript code
//sticky menu
var stickyNavTop = $('.main-navbar').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.main-navbar').addClass('sticky');
} else {
$('.main-navbar').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
can you please check the page
http://www.chainreaction.ae/alayam/
thank you
Add this css:
.scotch-panel-canvas {
transform: none !important;
-ms-transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
}
Please remove inline styles from the scotch-panel-canvas div then it works fine...
remove this style: style="position: relative; height: 100%; width: 100%; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; transition: all 300ms ease;"
i don't how this inline css coming from but you should remove this. I think this style coming from some jquery. When u remove this code it works fine...
and also increase the z-index value
Using position: fixed; and top: 0px; should be enough.
Please see this link http://jsfiddle.net/luckmattos/yp8HK/1/

Page elements shaking due to CSS effect

I added a ripple effect to happen when the user clicks anywhere on a div. It works well except that when the page is full screen, the element shake and go blurry for until the ripple disappears.
Here's the JS for the effect:
$("div").click(function(e) {
// Remove any old ripples
$(".ripple").remove();
// Setup
var posX = $(this).offset().left,
posY = $(this).offset().top,
buttonWidth = $(this).width(),
buttonHeight = $(this).height();
// Add the element
$(this).prepend("<span class='ripple'></span>");
// Make it round
if(buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
// Get the center of the element
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2;
// Add the ripples CSS and start the animation
$(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
});
And the CSS:
.ripple {
width: 0;
height: 0;
border-radius: 50%;
background: rgba(249, 107, 107, 0.8);
transform: scale(0);
position: absolute;
opacity: 1;
z-index: 100;
}
.rippleEffect {
animation: rippleDrop .4s linear;
}
#keyframes rippleDrop {
100% {
transform: scale(0.1);
opacity: 0;
}
}
Here's the fiddle but you can't see the issue as it's a minimized preview, so here's another link where you can see it.
Thank you for any help!
Change your code
FIRST:
<div style="visibility: visible; position: fixed;" id="choose" class="centered">
<div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
<h3>You are X, the computer is O.</h3>
<button id="okay">OK</button>
<button id="surprise">No</button>
</div>
</div>
2.
<div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
<h3>You are X, the computer is O.</h3>
<button id="okay">OK</button>
<button id="surprise">No</button>
</div>
You can also add that in your CSS i just paste to you that you can see cahanges!
NOTE - You need chack you YQ code, i can overwrite circle
picture:http://prntscr.com/clwp72
The problem is with this class:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Cancel it and you will not have flickering.
I'm guessing that the problem is with the transform attribute. You insert and remove items into the DOM and it has to recalculate the position.
When I clear all styles from the class- flickering is gone:
Fiddle

jQuery direction-aware hover with CSS3 transition

I am struggling to get direction-aware hover and css transitions to work properly. Basically I am trying to have a grid of elements with a front and back face, and when on hover have a css transition to flip that element to show the back face.
Transition example (without direction-aware): fiddle
As you can see, no matter which way your mouse enters an element it always flips up. I want it to flip whichever way the mouse enters in/out.
Example:
And here is my attempt with direction-aware: fiddle
I am using jQuery to add classes relevant to the mouse in/out direction.
.hover-in-top {}
.hover-in-right {}
.hover-in-bottom {}
.hover-in-left {}
.hover-out-top {}
.hover-out-right {}
.hover-out-bottom {}
.hover-out-left {}
As you can see from the direction-aware example it kind of works but there are major glitches which I can't get my head round. (I've been overthinking this and my brain has just imploded.)
Anyway I hope this makes sense. Thanks.
I have a partial solution to your question.
But I needed to change some of the transitions to animations
$('.box-container .box').each(function() {
$(this).on('mouseenter mouseleave', function(e) {
var $this = $(this),
width = $this.width(),
height = $this.height();
var x = (e.pageX - $this.offset().left - (width / 2)) * (width > height ? (height / width) : 1),
y = (e.pageY - $this.offset().top - (height / 2)) * (height > width ? (width / height) : 1);
// top = 0, right = 1, bottom = 2, left = 3
var dir_num = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
directions = ['top', 'right', 'bottom', 'left'];
// If mouse enter
if (e.type === 'mouseenter') {
// Remove all hover out classes
$this.removeClass(function(index, css) {
return (css.match(/(^|\s)hover-out-\S+/g) || []).join(' ');
});
// Add in direction class
$this.addClass('hover-in-' + directions[dir_num]);
}
// If mouse leave
if (e.type === 'mouseleave') {
// Remove all hover in classes
$this.removeClass(function(index, css) {
return (css.match(/(^|\s)hover-in-\S+/g) || []).join(' ');
});
// Add out direction class
$this.addClass('hover-out-' + directions[dir_num]);
}
});
});
* {
box-sizing: border-box;
}
.box-container {
padding: 20px;
width: 600px;
}
.box-container:after {
content: '';
display: block;
clear: both;
}
.box-container .box {
float: left;
width: 50%;
height: 200px;
position: relative;
perspective: 600px;
border: 1px solid transparent;
}
.box-container .box .front, .box-container .box .back {
float: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all 1s ease-in-out;
color: white;
font-size: 60px;
}
.box-container .box .front {
background: blue;
transform: rotateX(0) rotateY(0);
z-index: 900;
}
.box-container .box .back {
background: red;
z-index: 800;
}
.box-container .box:hover .front {
z-index: 900;
}
.box-container .box:hover .back {
z-index: 1000;
transform: rotateX(180) rotateY(0);
}
.box-container .box.hover-in-top .front,
.box-container .box.hover-out-bottom .back {
transform: rotateX(-179deg) rotateY(0);
}
.box-container .box.hover-in-top .back,
.box-container .box.hover-out-bottom .front {
animation: Xminus 1s ease-in-out;
}
#keyframes Xminus {
from {transform: rotateX(179deg) rotateY(0);}
to {transform: rotateX( 0deg) rotateY(0);}
}
.box-container .box.hover-in-bottom .front,
.box-container .box.hover-out-top .back {
transform: rotateX(179deg);
}
.box-container .box.hover-in-bottom .back,
.box-container .box.hover-out-top .front {
animation: Xplus 1s ease-in-out;
}
#keyframes Xplus {
from {transform: rotateX(-179deg) rotateY(0);}
to {transform: rotateX( 0deg) rotateY(0);}
}
.box-container .box.hover-in-right .front,
.box-container .box.hover-out-left .back {
transform: rotateY(-179deg);
}
.box-container .box.hover-in-right .back,
.box-container .box.hover-out-left .front {
animation: Yminus 1s ease-in-out;
}
#keyframes Yminus {
from {transform: rotateX(0deg) rotateY(179deg);}
to {transform: rotateX(0deg) rotateY( 0deg);}
}
.box-container .box.hover-in-left .front,
.box-container .box.hover-out-right .back {
transform: rotateY(179deg);
}
.box-container .box.hover-in-left .back,
.box-container .box.hover-out-right .front {
animation: Yplus 1s ease-in-out;
}
#keyframes Yplus {
from {transform: rotateX(0deg) rotateY(-179deg);}
to {transform: rotateX(0deg) rotateY( 0deg);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
</div>
The problem with animations if that if you leave the div before the animation has ended, the animation will break
But if move slowly, and stay on the divs until the animation ends, this will work ok.
I hope that somebody finds a better solution
I believe that the best way to approach the problem is not to use CSS transitions.
You can easily implement it using jQuery's animate, utilizing jQuery animations queue to keep all of your animations synced.
I modified your example to animate the transition in JavaScript.
Code example

Polymer 1.0 - HIDE Paper Drawer Panel

I am using Polymer 1.0 to implement paper-drawer-panel. I have some links on paper-header-panel topbar too. I have used the css selector for narrow to hide those links when narrow width. thus in mobile only using drawer for navigation. it looks like this right now on wide and narrow widths.
<paper-drawer-panel id="drawerPanel">
<paper-header-panel drawer id="test1">
<paper-toolbar><span>Menu</span></paper-toolbar>
<paper-menu vertical layout>
<paper-item data-route="home">Home</paper-item>
<paper-item data-route="about">About</paper-item>
<paper-item data-route="contact">Contact</paper-item>
<paper-item> Dropdown</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar class="navbar">
<paper-icon-button icon="menu" id="navicon" paper-drawer-toggle></paper-icon-button>
<div>
TryDjango
</div>
<span class="flex"></span>
<paper-tabs selected="0" attr-for-selected="data-route" style="text-align:center" id="navbarmenu1">
<paper-tab>Home</paper-tab>
<paper-tab>About</paper-tab>
<paper-tab>Contact</paper-tab>
<paper-tab>Dropdown</paper-tab>
</paper-tabs>
<span class="flex"></span>
<paper-tabs selected="0" id = "navbarmenu2">
<paper-tab>Default</paper-tab>
<paper-tab>Static Top</paper-tab>
<paper-tab>Fixed Top</paper-tab>
</paper-tabs>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
this is the css i used to hide my header-panel links when in narrow layout.
paper-drawer-panel[narrow] #navbarmenu1 {
display: none;
}
paper-drawer-panel[narrow] #navbarmenu2 {
display: none;
}
I gave those two paper-menu items IDs to hide them when [narrow]
HERE IS MY PROBLEM NOW:
I want to hide to drawer-panel all the time unless narrow. Like this:
I can't use force-narrow on my drawer panel as it will hide my paper-header links even in wide width.
So how can i make that drawer-panel hidden or implement what i want in a better way. any help is appreciated. :)
What you are looking for is implemented in the https://www.polymer-project.org/summit. They have implemented a custom element x-drawer. I am not sure whether the code for this website is published. However you can take a look at the code in your browser. It's well formatted. From that code, I see they have used 'visibility: hidden' to hide the drawer. Below is the complete definition of that element. Hope this helps!
<dom-module id="x-drawer" assetpath="../bower_components/app-layout/x-drawer/">
<style>
:host {
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: 0;
width: 256px;
overflow: hidden;
background-color: var(--x-drawer-background-color, #fff);
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.42, 0, 0.33, 1.01);
transition: transform 0.4s cubic-bezier(0.42, 0, 0.33, 1.01);
}
:host([position=right]) {
right: 0;
left: auto;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
:host([position=top]) {
top: 0;
right: 0;
bottom: auto;
left: 0;
width: auto;
height: 256px;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
:host([position=bottom]) {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: 256px;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
:host([opened]),
:host([position][opened]) {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
</style>
<template>
<content></content>
</template>
<script>
Polymer({
is: 'x-drawer',
behaviors: [
Polymer.OverlayBehavior
],
properties: {
opened: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true,
observer: '_hasOpenedChanged'
},
position: {
reflectToAttribute: true
}
},
listeners: {
'transitionend': '_onTransitionEnd'
},
toggle: function() {
this.opened = !this.opened;
},
_hasOpenedChanged: function(opened, prev) {
if (prev !== undefined) {
this.style.visibility = 'visible';
}
this.shouldEnableScroll(true);
},
_onTransitionEnd: function(e) {
if (e.currentTarget == this) {
this.style.visibility = '';
}
}
});
</script>
</dom-module>
In your case, try removing [narrow] on display: none as below
paper-drawer-panel #navbarmenu1 {
display: none;
}

Categories

Resources