Develop Reference

Fixed side menu inside wrapper

So I have a site that is contained in a wrapper that has a max width. This site also has a fixed side menu that is toggled with a button.
My issue is having the fixed side menu to stay inside the page wrapper as fixed elements are relative to the window not the parent element.
Here is an example using position: fixed: https://jsfiddle.net/okavp4p1/
As you can see the menu is coming out from the side of the viewport, not the wrapper (grey area).
I have found away around this using position: absolute: https://jsfiddle.net/5q3hn1fq/
Here you can see the menu is coming out of the wrapper. (correct)
But I had to write some extra jQuery to spoof fixed positioning on scroll.
// Fix menu
$(window).on('load scroll resize', function() {
navigation.find('ul').css('top', $(window).scrollTop());
});
But doing it this way causes glitches/lag on most web browsers. Though the example isn't to bad when scrolling but when implementing this on an actual site with tons more elements/code it becomes very obvious.
Here is what it looks like in use when scrolling down the page:
I have thought of disabling scrolling when the menu is open but I was just wondering if anyone can help?

there is a work-around for this. you need to create a bar at the top with position:fixed. This bar should have height: 1px and no background-color so you can't see it.
then you can add your navigation inside of there, and float:right. when you float right, it will show up, but will be pinned to the invisible fixed bar at the top. also, you have to give the nav a width of 0 so its invisible. then you can transition its width to 100px or whatever you want on button click.
finally, use jQuery to set its height to the height of the window on resizing of the window, and when you show it.
here's the fiddle: https://jsfiddle.net/ahmadabdul3/pptggn6v/1/
since the bar is inside a position:relative bar, it shouldn't jump around as much (or at all)
do NOT add right or left padding to the navigation though, this will break the effect. instead, you can put a container around the nav, and make the nav width: 90% or something so it appears to have some padding.
here's an updated fiddle with how the padding should be: https://jsfiddle.net/ahmadabdul3/pptggn6v/2/

If performance accross all browsers is the issue, you could re-write your function using plain .js instead of jquery.
I couldn't replicate the jittery movement in chrome, but the below should be put less strain on the browser.
$(window).on('load scroll resize', function() {
document.getElementById('nav-list').style.top = window.scrollY + 'px';
});
https://jsfiddle.net/hb4zsL6g/

fullpage.js - add css class to header when scrolling inside a section

I am using fullpage.js
https://github.com/alvarotrigo/fullPage.js/
on a frontpage of a website and it´s working fine so far.
I have 4 Sections.
The first section has more content than the height of the browser window, so there is the need to scroll inside that section.
I have added the scrollbar and it works with the scrollbar and by using the mousewheel.
Now my problem.
I have a sticky header which I want to reduce in height as soon as there is any scrolling down inside this section (and increase in height as soon as I scroll back up to the top).
So I would like to add the css class "sticky" to the "header" when using the scrollbar of the fullpage.js or the mousewheel so that I can format the header with the class "sticky" differently with css.
Unfortunately the "scroll-Events" doesn´t work here, as already mentioned here:
FullPage.JS Scrolling
I tried the following
$(function(){
window.addEventListener("wheel", function() {
$(document).ready(function(){
var scrollclass = $('.slimScrollBar').position();
if(scrollclass.top > 0){
$('header').addClass('sticky');
}
else{
$('header').removeClass('sticky');
}
});
});})
This kind of works, however the sticky class is not added by the first use of the mousewheel (it´s added by the "second turn of the mousewheel") and is not beeing removed when scrolling back to the top, I need to turn the wheel an additional time after scrolling back to the top to have the sticky class removed again.
If I change the if-statement to >= 0 it works on the first turn of the mousewheel but then I don´t get the class removed when scrolling back to the top.
The second issue is, that this only works by using the mousewheel of course, and not by dragging the scrollbar created by fullpage.js
Any ideas or hints how to solve this?
Thanks
John

you could use the "afterLoad" method, as noted in fullPage.JS's documentation:
https://github.com/alvarotrigo/fullPage.js#afterload-anchorlink-index

Make sidebar stick when one of the child elements reaches top having the child element on top of it with an auto height

I'm having a problem trying to make my sidebar stick in the correct height and making the desired effect, this is my code:
https://jsfiddle.net/oavgLrf9/
I want my sidebar to add a fixed class when the second module reaches top, the problem is that both of the modules use height auto so their height change depending of the monitor.
<div class="sidebar">
<div class="mod-1"></div>
<div class="mod-2"></div>
</div>
Also I want that when the user scrolls top the side bar goes top too, and when it reaches bottom changes to absolute, like this example:
http://jsfiddle.net/gmolop/y3tdL9wd/
I tried using the sticky-kit plug in it does almost exactly what I want, would be the example 4, but it doesn't stick in the height I need because of these changing values.

you can use HcSticky to solve your problem.
http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/
see examples:
http://someweblog.com/demo/hcsticky/

How to fix main navigation on top when scrolling down

First, Merry Christmas to all
I want to fix my top navigation menu bar on top when scrolling down like : csschopper.com
this happen by position: fixed; css property but when i put it in css menu will be fixed at top. this will require some javascript code but I don't know what exactly the code is. also when someone scroll down i also want to display small logo beside the menu like csschopper.com
Thanks in advance.

This is what the code would look like: jsFiddle In this example I created two navigation bars but you can also have one and then add an item
This is jQuery code, so make sure to load the jQuery libery:
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

Initial position of topbar is static. But when user scroll (you have to catch onscroll event) like this on jquery :
$(window).scroll(function());
with a scroll position bigger than header height, the Javascript modifiy the topbar position to fixed with this for example :
documentById().style.display
The same thing for the logo on left.

HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

i'm trying to slide a div element from outside the page to within the page. However as soon as the element is shown outside the page, horizontal scrollbars appear!
How can I achieve this without the scrollbars appearing?
Any help appreciated very muchly, thanks :)

Briefly, using overflow-x:
function moveStuff() {
$('body').css('overflow-x', 'hidden');
$('#iteminmotion').show().animate(..., function() {
$('body').css('overflow-x', 'auto');
});
}

move the element off the page to the left, moving it off to the right increases the width of the page

You could temporarily turn off side scrolling by applying this css to the body:
body {overflow-x:hidden;}
http://jsfiddle.net/pxfunc/YYUZJ/

Do you really need to construct the element off page, or just make it look like it slides onto the screen? Ive done similar things in the past to emulate a graphic that slides across a page, but instead of starting outside the view area I've created it as far to the side as possible and then animated the slide to the middle. The user experience at that point can be a graphic that slides onto a page from outside the view area.