We Keep Coding

Fixed div on scroll down & Set absolute when scroll up

sir I want to lock my menu with div id menu fixed in top of window when scroll down the window, and also I want to set position as absolute when it scroll up I tried with this code. its doing the first job correctly. i can set the menu fixed at top of page. but it can't set the page absolute position when scroll up here is my code
<script type="application/javascript">
$(window).bind('scroll', function () {
if (window.scrollY=100){
document.getElementById("menu").style.position = "fixed";
document.getElementById("menu").style.top = "0px";
}
else if(window.scrollY < 100){
document.getElementById("menu").style.position = "absolute";
document.getElementById("menu").style.top = "100px";
}
});
</script>

You were assigning value instead of comparing window.scrollY=100
The code should be:
$(window).bind('scroll', function () {
if (window.scrollY>=100){
// ^^-----------use >= here
document.getElementById("menu").style.position = "fixed";
document.getElementById("menu").style.top = "0px";
}
else if(window.scrollY < 100){
document.getElementById("menu").style.position = "absolute";
document.getElementById("menu").style.top = "100px";
}
});

fadein only if I'm scrolling down

I'm using this snippet to make an element fade out if scrolltop is > 750 and fade in when it's < 750. It works fine but I'd like it to remain not visible when scrolling back up (after it faded out) until user reaches the top of the page.
So, this is what's currently happening:
element is visible by default, user scrolls 750 and it fades out. User reaches end of the page, scrolls back up and when reaches 750 the element fades back in.
var $window = $(window);
var $freccia = $('#freccia1');
function showHideFreccia() {
var availableScroll = $(document).height() - $window.height(),
scrollTop = $window.scrollTop();
if( scrollTop < 750 || scrollTop == availableScroll) {
$freccia.fadeIn("slow", function() {
});
} else {
$freccia.fadeOut("slow", function() {
});
}
}
showHideFreccia();
$window.scroll(showHideFreccia);
What should be changed is:
element is visible by default, user scrolls 750 and it fades out. User reaches end of the page, scrolls back up and when reaches top of the page the element fades back in.
I tried with this but it's not working (doesn't fade in/out anymore):
var $window = $(window);
var $freccia = $('#freccia1');
function showHideFreccia() {
var availableScroll = $(document).height() - $window.height(),
scrollTop = $window.scrollTop();
if ( scrollTop > 750 || scrollTop == availableScroll) {
$freccia.fadeout("slow", function() {
});
}
if ( scrollTop < 1 || scrollTop == availableScroll) {
$freccia.fadein("slow", function() {
});
}
}
showHideFreccia();
$window.scroll(showHideFreccia);

Your second code snippet works fine, you've just used fadein and fadeout instead of fadeIn and fadeOut, a common mistake!
This code is working fine for me:
JSFiddle
var $window = $(window);
var $freccia = $('#freccia1');
function showHideFreccia() {
var availableScroll = $(document).height() - $window.height(),
scrollTop = $window.scrollTop();
if ( scrollTop > 750 || scrollTop == availableScroll) {
$freccia.fadeOut("slow", function() {
});
}
if ( scrollTop < 1 || scrollTop == availableScroll) {
$freccia.fadeIn("slow", function() {
});
}
}
showHideFreccia();
$window.scroll(showHideFreccia);
EDIT:
Unsure if this is what you want to happen or not, but this current code will show the element again when you reach the end of the page. You can fix this just by removing the || scrollTop == availableScroll from your second if statement (if it's not needed at all, it can be removed from the first also).

You can use this script, to apply in your scroll top:
var detectScroll = function (_event) {
var event = window.event || _event; // old IE support
var direction = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
return direction;
};
function showHideFreccia(e) {
var dir = detectScroll(e);
//...
if ( dir == 1 || scrollTop == availableScroll) {
// your action
}
}
// and into your scroll event
$window.scroll(function(e) {
showHideFreccia(e);
});
Source
If it will return 1 it means, that you scroll up then execute your fadein action. -1 me means scroll to bottom

Navbar makes content jump when position is changed to fixed on scroll past

I've been trying to make my navbar stick to top when I scroll by it and achieved it. The only problem is that my content kind of kicks up when the navbar transition to position fixed is executed.
Here is an example of this behavior: http://jsfiddle.net/7HHa5/4/
JavaScript
window.onscroll = changePos;
function changePos() {
var header = document.getElementById("header");
if (window.pageYOffset > 70) {
header.style.position = "absolute";
header.style.top = pageYOffset + "px";
} else {
header.style.position = "";
header.style.top = "";
}
}
I am using bootstrap and jQuery.
How can I avoid this behavior?

When you set the header to position: absolute, it leaves an empty space which gets filled by the content. You need to add a margin to the top of the content when the header becomes fixed, like this:
window.onscroll = changePos;
function changePos() {
var header = document.getElementById("header");
var content = document.getElementById("content");
if (window.pageYOffset > 70) {
header.style.position = "absolute";
header.style.top = pageYOffset + "px";
content.style.marginTop = '55px'
} else {
header.style.position = "";
header.style.top = "";
content.style.marginTop = '0'
}
}
See http://jsfiddle.net/2EhLs/1/ for an example.
However, there is a better way.
Since you are already using Bootstrap, you should consider using the built-in Affix feature.
The best example is this one from another question:
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});

Javascript fixed-top navbar only after scrolling

Does anyone know what javascript effects are being used to create the navbar effect on lesscss.org where the navbar only becomes fixed to the top after scrolling beyond a certain point. If anyone has actual code examples, or links to tutorials, that'd be appreciated.

it's a javascript check using the window.onscroll event
in the HTML source near the top:
window.onscroll = function () {
if (!docked && (menu.offsetTop - scrollTop() < 0)) {
menu.style.top = 0;
menu.style.position = 'fixed';
menu.className = 'docked';
docked = true;
} else if (docked && scrollTop() <= init) {
menu.style.position = 'absolute';
menu.style.top = init + 'px';
menu.className = menu.className.replace('docked', '');
docked = false;
}
};

Speed up my Javascript Scroll-Event Code

I added some special features to the sidebar of my webapplication. You can see a concept of the user interface on my testing site. (It's about the right sidebar)
The sidebar stops scrolling if it is scrolled to its end.
Moreover there are selected listitems in the sidebar wich stay on the top or the bottom of the sidebar if they would scroll out of the view.
My code is written in Javascript using jQuery. Unfortunately scrolling on my page is lagging now. Here are the links to my demo page (rightclick -> show sourcecode) and its javascript file.
How can I speed up the code (and let is still abstract) ?
I paste the javascript code here for those of you who don't want to follow the links.
HTML: (example)
<ul id="right">
<li><h3>Headline</h3></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a class="selected">Active Item</a></li>
<li><a>Item</a></li>
<li><h3>Headline</h3></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
Javascript:
var Scrollers = $('#content,#left,#right');
var Scrollable = new Array(Scrollers.length);
var TopOffset = new Array(Scrollers.length);
var BottomOffset = new Array(Scrollers.length);
var OuterHeight = new Array(Scrollers.length);
var OuterHeightAndOffsets = new Array(Scrollers.length);
function ScrollInit(){
Scrollers.each(function(i){
// constants
TopOffset[i] = parseInt($(this).css("margin-top").replace("px",""));
BottomOffset[i] = parseInt($(this).css("margin-bottom").replace("px",""));
OuterHeight[i] = parseInt($(this).outerHeight());
OuterHeightAndOffsets[i] = TopOffset[i] + BottomOffset[i] + OuterHeight[i];
// classes
$(this).removeClass('snapped top bottom');
if(OuterHeightAndOffsets[i] < $(window).height()){
$(this).addClass('snapped top');
Scrollable[i] = false;
} else {
Scrollable[i] = true;
}
});
}
ScrollInit();
var SelectedListitems = $('li.selected');
var SelectedListitemsActive = new Array(SelectedListitems.length); for(var i=SelectedListitems.length; i<0; i++) SelectedListitemsActive[i] = false;
function ScrollCalc(){
// list item locking
SelectedListitems.each(function(i){
if(!($(this).parent().hasClass('snapped top'))){
var ListItemOffset = $(this).offset().top - $(window).scrollTop();
var ListItemState=0; // 0:in, 1:above, 2:under
if(ListItemOffset <= $(this).parent().offset().top){ ListItemState=1; }
else if(ListItemOffset + $(this).outerHeight() >= $(window).height()){ ListItemState=2; }
// no snapped clone so far
if(ListItemState){
if(SelectedListitemsActive[i]!=true && !$(this).parent().hasClass('snapped')){
var AppendClasses = 'clone snapped '; if(ListItemState == 1) AppendClasses += 'top '; else AppendClasses += 'bottom ';
$(this).parent().append($(this).clone().addClass(AppendClasses + i));
SelectedListitemsActive[i] = true;
}
// already snapped, clone existing
} else {
if(SelectedListitemsActive[i]==true){
$('.clone.snapped.' + i).remove();
SelectedListitemsActive[i] = false;
}
}
}
});
// scroll container locking
Scrollers.each(function(i){
if(Scrollable[i]){
if($(window).scrollTop()+$(window).height() > OuterHeightAndOffsets[i]){
$(this).addClass('snapped bottom');
} else {
$(this).removeClass('snapped bottom');
}
}
});
ScrollEvent = false;
}
ScrollCalc();
$(window).scroll(function(){
ScrollCalc();
});

I've just have a look at you link and believe that the lagging is not because of your javascript. If you don't think so try to disable all scripts in window.scroll event, still lagging right?
Now try to remove all shadow properties - box-shadow and text-shadow. Also remember to disable changing shadow opacity in simple.js (changing shadow during scroll event always laggy).
Now you can see it run very fast!!! Back to css file and enable each shadow properties and find out what is most suitable for you.

There is a much faster, easier way to get the effect you want.
Try this: when the window scrolls down far enough, set your sidebar's css position property to fixed. When it scrolls up, set the position of the sidebar back to relative.
var sidebar = document.getElementById('side'),
section;
sidebar.style.position = 'relative';
sidebar.style.bottom = '0px';
sidebar.style.right = '0px';
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
maxTop = section ? section.offsetTop : sidebar.offsetHeight - window.innerHeight;
sidebar.style.top = sidebar.style.bottom = null;
if (scrollTop > maxTop) {
if (section) {
sidebar.style.top = - section.offsetTop + 'px';
} else {
sidebar.style.bottom = '0px';
}
sidebar.style.position = 'fixed';
} else {
sidebar.style.position = 'relative';
}
}
You can see it working here - http://jsfiddle.net/cL4Dy/