Develop Reference

Transition logo only when it slides left not when it goes back to original position

I'm building my homepage with a custom theme in wordpress.
I placed my logo in the middle of the page and I need it goes fixed when I scroll to it. I achieved it with this code:
var stickyLogo = jQuery('.logo_centered').offset().top;
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > stickyLogo) {
jQuery('.logo_centered').addClass('fixato');
}
else {
jQuery('.logo_centered').removeClass('fixato');
}
});
and it works.
I also added a transition when click on it to hide it and open the slidein menu.
jQuery('.logo_centered').on('click', function(){
jQuery('.logo_centered').toggleClass('hideme')
})
While this is the menu opening
jQuery('.centrato').on('click', function(){
jQuery('.overlay').toggleClass('overlay--active')
})
jQuery('.overlay').on('click', function(){
if(jQuery('.overlay').hasClass('overlay--active')){
jQuery('.overlay').removeClass('overlay--active')
}
})
jQuery('.overlay').on('click', function(){
jQuery('.logo_centered').toggleClass('pushme');
})
jQuery('.overlay').on('click', function(){
if(jQuery('.logo_centered').hasClass('hideme')){
jQuery('.logo_centered').removeClass('hideme')
jQuery('.logo_centered').removeClass('pushme')
}
})
But, as you can see on my demo website:
http://arioldigioielleria.it/test/
the animation is triggered also when it goes fixed and back.
How can I avoid this?

You can disable the transition when scrolling by making your transition specific to horizontal movement:
.logo_centered {
transition:left 0.5s;
}
By the way, this is now possible using only CSS with position:sticky. You might find it more maintainable than JavaScript:
A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
-MDN

Slide background in and out of view

I have a button that slides the background out of view once clicked. I wish to make another button appear that, once clicked, will slide the background back into view.
I have experimented with changing the background position using animate(), but can't figure out what is the best way to move the background image completely in and out of view.
In the code below, I've tried to stay away from using "px" as a unit in order to make sure that the slide works on all screen sizes.
What would be the best way to achieve this effect? Should I use px, vh, or %?
$("#slide").click(function() {
$(".container").delay(100).animate({
'background-position-y': '600%'
}, 800, 'linear');
$(".processHeader").delay(1000).toggle("blind", {
direction: "up"
}, 600);
$(".processContent").delay(2000).toggle("blind", {
direction: "up"
}, 600);
});
$(".next").click(function() {
$(".container").delay(100).animate({
'background-position-y': '-600%'
}, 800, 'linear');
$(".processHeader, .processContent, .step4, .next").delay(200).fadeOut(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You will want to use jQuery(window).width() to determine the screen size, which is cross browser compatible, and pulls the current screen dimensions when it is referenced.
This should work as long as the window is not resized. If you want to also keep the image hidden when resizing occurs, you would nest this in a resize event:
window.onresize = function(event) {
...
};

You should use the top, bottom, left, and right css commands. They can be animated the same way, and are used as reference for a div. For example, giving a div the style top:0;left:0 will anchor it at the top left corner.
You can then animate it to top:100%;left:100% to hide it.
Hiding a background example

mCustomScrollbar prepend new content

I am using mCustomScrollbar and I am trying to dynamically load content on top and bottom of the scroll (of course, not the same time).
http://manos.malihu.gr/jquery-custom-content-scroller/
When appending content it works awesome, the scroll will stay in the correct position (the position you scrolled to, and will automatically change the scroll bar position so that you can continue to scroll down to see the new content).
However, when you prepend content (place it on top in the scrollbar), and the user scrolls up, the content will load but the scrollbar will be forced to move up to the top. I want this to work exactly the same way as when appending content on the bottom: let the user scroll up to see the new content.
$(selector).mCustomScrollbar({
mouseWheel: {
scrollAmount: 500,
preventDefault: true
},
callbacks: {
advanced: {
updateOnContentResize: true
},
onScroll: function() {
// this.mcs.topPct contains the current scroll position (when scroll animation is completed.
// it can be between 0-100, where 100 is bottom and 0 is top
//
// my scroll starts on the bottom, and when this.mcs.topPct is 0
// I load dynamic content and place it on the very top of all content
// this causes the scroll to display this content immediately,
// and I would like the user to manually scroll up to see the added content.
}
}
});

if it's still relevant, my solution is:
Before loading new data (assuming you use jquery load/post) get your first ,the top most entry (comment,picture etc.) as an object 'YourObject' (name it how you like it)
Once you load new content use the following line
$(selector).mCustomScrollbar("scrollTo",YourObject,{scrollInertia:0});
It flickers a bit, but at the moment that's about the only way to achieve it.

$(selector).mCustomScrollbar({
mouseWheel: {
scrollAmount: 500,
preventDefault: true
},
callbacks: {
advanced: {
updateOnContentResize: true
},
onBeforeUpdate:function(){
this.totalScroll = this.mcs.topPct.slice(0);
},
onUpdate:function(){
this.mcs.topPct = this.totalScroll;
}
});
Not sure if it works because I don't really have time to make a list that renders objects both on the top and bottom, but if it works then great!
Let me know if it works :)

I ended with the solution below which is not perfect because of flickering.
It requires that the item size is fixed, that you compute "itemsPerRow" beforehand, and (preferably) that you prepend full rows
My content is generated by angular directives doing asynchronous calls. Maybe it is the cause of the flickering.
I'll have to dig again into malihu code to find a better way I guess.
var container=$('.mCustomScrollbar');
var mcs=container[0].mcs;
if (mcs.direction=='y') {
var offset=Math.round(items.length/itemsPerRow)*itemHeight;
} else {
var offset=items.length*itemWidth;
}
var side={x: 'left', y: 'top'};
var pos=mcs[side[mcs.direction]];
var scrollOptions={scrollInertia: 0};
container.mCustomScrollbar('scrollTo', pos-offset, scrollOptions);

Change scrollTop offset

I am using bootstrap 3 and have a fullscreen hero unit at the top of my page, below that is my navigation. I have some js which allows my navbar to stick to be fixed at the top after you scroll past the full screen hero. Also some js for my smooth scrolling links.
The problem is the offset is different before you scroll past the full screen hero and after. But it works fine when you are past the jumbotron. I have tried a bunch of different things but I can seem to get this to work exactly.
Check out the fiddle here.
Here is my js for the smooth scrolling links:
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 1200);
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 95;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
By changing var offSet = 95; I am able to adjust the offset but what would be the best way to use 180 before the navbar sticks to the top but 95 when it does?
Also here is the js I am using for my navbar:
$(function () {
/* $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
$(window).resize(function (e) {
$(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
});*/
$(document).on( 'scroll', function(){
console.log('scroll top : ' + $(window).scrollTop());
if($(window).scrollTop()>=$(".jumbotron").height())
{
$(".navbar").addClass("navbar-fixed-top");
}
if($(window).scrollTop()<$(".jumbotron").height())
{
$(".navbar").removeClass("navbar-fixed-top");
}
});
});

Are you open to angular.js? I have a directive i use for this. As seen here.
I'll grab the plunker link for you. you might find the code helpful.
Essentially you need to create a ghost dom element to take the place of the menu when you pull it to an new layout position.
EDIT: Here it is
I won't suggest grabbing angular just for this. But you can use the basis of the events and logic to build your own solution.
This here is creating an element and placing in its place
$scope.spacer = $element.after(
'<div class="spacer" style="height:' + $element[0].clientHeight + 'px"> </div>').next();
then this element is removed when the menu is back to its static position.
Inspect the dom and watch how it changes, this will probably help you see the events and changes that need to take place.
EDIT 2 SOLUTION:
HERE is the concepts applied to your JSFiddle

It's not the best solution but by adding margin: 0 0 -100px 0; to your .navbaryou lose the spacing issue.
Also you're getting 22 console errors because of missing images. I'm not saying that this is causing any major problems but you would be better off losing them.

The problem is that when you have not scrolled past the hero, navigation is still part of the layout and pushes content bellow it a little lower. When you scroll past (either manually or via a script) the hero, navigation is removed and fix positioned. That makes everything which was bellow to "jump up" exactly of the navigation height.
That means if portfolio was 1000px from the top, on click you say: go 1000px from top; but then porfolio moves 100px up (as explained above) meaning it is now 900px from the top while the window scrolled 1000px as you asked.
When you have scrolled past the hero, nothing changes its position.

MooTools Tween Stutter/Hiccup

I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here

The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.