We Keep Coding

How can I sync two sliders with mousewheel?

I am using Swiper slider on my page. And on my page i have two sliders. I want, when i use scroll up - first slider go up and second slider go down. And when i use scroll down - first slider go down and second slider go up.
I write this
https://288757.playcode.io
https://playcode.io/288757?tabs=style.css&output
but this code is not good, becouse work strange on mac and doesn't work on firefox and becouse i down't use mousewheel swiper parametr.
$(window).bind('mousewheel', function(event){
var width = $(document).width();
if(width >= 769){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
mySwiper1.slideNext(600);
mySwiper2.slidePrev(600);
}
else {
mySwiper1.slidePrev(600);
mySwiper2.slideNext(600);
}
}
});
This is my sliders without this code
https://jsfiddle.net/gpkd83nr/2/
How can I sync two sliders with mousewheel? Thank you!

can you try this ?
window.onwheel=function(e){
var val=e.deltaY;
if(val>0){
mySwiper1.slideNext(600);
mySwiper2.slidePrev(600);
}
else{
mySwiper1.slidePrev(600);
mySwiper2.slideNext(600);
}
}

Sticky header jumps on fast scrolling

I have problem with sticky header. I have placeholder to keep good height when i am scrolling and it's working fine. Problem appear when i scroll faster. I read that jquery scroll position by 1-2-4-12.. pixels at once and by it my sticky header stick not on position i wanted what couse something like jump or blink.
scroll() {
let queryWindow = Ember.$(window);
let siteBarHeight = Ember.$('.folded').offset() ? 19 : 47;
queryWindow.scroll(() => {
let fixedHeader = this.get('fixedHeader');
let shouldBeFixed = queryWindow.scrollTop() > 90 + siteBarHeight;
if (!fixedHeader && shouldBeFixed) {
this.set('fixedHeader', true);
} else if (fixedHeader && !shouldBeFixed) {
this.set('fixedHeader', false);
}
});
}
This all working fine when my scroll slowly, but in other way jquery stick it too late. Thanks in advance for helping me, tell me if you need more information about it.

Having issue in implementing effect like facebook right sidebar scroller

I am trying to implement effect like facebook right sidebar scroller but if the data changes dynamically then it does not work properly?
Here is my javascript code:-
var target = $('.aside');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.css('margin-top','-1000px');
target.css('margin-bottom','30px');
}
else {
target.css('margin-top','0px');
}
});

Have you looked into Scroll Spy?
https://github.com/sxalexander/jquery-scrollspy
I believe it does what you are tying to accomplish

Get and set top position

I am using hammer.js to make a basic touch friendly mobile site. I have hidden the top menu with a negative top position and it will appear using css3 transitions upon a double tap. However I want it to then hide again upon a second double tap.
I have tried using if/else to call the top position then re-set it accordingly but I cant get it to work, anyone know where I am going wrong?
var t = $("#topbar");
var position = t.position();
$sw.on('doubletap', function(event) {
event.preventDefault();
if (position.top == '-55px') {
$('#topbar').css("top", "0");
}
else {
$('#topbar').css("top", "-55px")
}
});
The site address is http://www.bettondesignwork.co.uk/tim/mobile
Thanks

You can try this:
var t = $("#topbar");
var position = t.offset();
$sw.on('doubletap', function(event) {
event.preventDefault();
if (position.top == '-55px') {
$("#topbar").offset({ top: "0"});
}
else {
$('#topbar').offset({ top: "-55px"});
}
}​

The problem could be this line
if (position.top == '-55px')
If i'm not mistaken, the .top property is numeric, so u could change the code to
if (position.top == -55)
Or become more defensive
if (position.top < 0)

Gets top position of one HTMLElement
function getHTMLElementTop(thisNode, Top)
{
if (Top == undefined)
{
var Top = 0;
}
if (thisNode.nodeType == 1)
{
Top += thisNode.offsetTop;
//if (thisNode.parentNode)
if (thisNode.offsetParent)
{
Top = getHTMLElementTop(thisNode.offsetParent, Top);
}
}
return Top;
}
May be it helps

Animate a percentage positioned DIV in JavaScript

I decided to improve my JavaScript skills by practicing with some often used modules.
I am creating a fixed feedback button that comes up when you press it and goes down when you press again. Everything works, but I want it to be animated.
I used this code to get it done
function rollUp(item){
if(item.className == "on") {
item.className="off";
document.getElementById("container").style.top = "97%";
} else {
item.className="on";
document.getElementById("container").style.top = "78.5%";
}
}
Now I just don't get those percentages animated, I found many descriptions about animating divs by px, but I don't get this working.
So the div has to be moved from top position 97% to 78.5%
Any help?

Are you using jQuery? If yea, please try this:
function rollUp(item){
if(item.className == "on") {
item.className="off";
$("#container").animate({top: "97%"});
} else {
item.className="on";
$("#container").animate({top: "78.5%"});
}
}

You would need something like a timeout which will change the position in small steps which actually is "animation", here
function rollUp(){
var ph=document.getElementById("container").style.top.toString();
ph.replace("px","");
var phi=parseInt(ph);
if(phi<800){
if(item.className == "on") {
item.className="off";
document.getElementById("container").style.top = (phi+10).toString()+"px";
} else {
item.className="on";
document.getElementById("container").style.top = "600px";
}
Window.setTimeout(roolUp(), 300);
}
}