We Keep Coding

How avoid horizontal html scrolling when a layer is show

I have a div .layer that darkens the entire page to highlight a modal, but when I trigger the event there is a problem to occupying 100% of the screen, and is that the scroll bar of the original browser is deleted
Is there any fancy way to make the div .layer, when is visible, keep the original bar scroll of the page?
In smartphones / tablet I do not find any problem when shooting the event .layer").show(); but on desktop screens the original scroll bar of browser is eliminated and the whole html document moves to right, taking its place.
What would be the correct way to avoid html to the right?
Thanks in advance!
HTML:
<div class="layer"></div>
<div class="open-modal">Open</div>
<div class="modal">
<div class="close-modal">Close</div>
</div>
CSS:
html {width:100%;min-height:100%;margin:0 auto;top:0;left:0;padding:0}
body {top:0;left:0;margin:0;padding:0;min-height:100%}
.layer {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
min-height:100vh;
background:rgba(0,0,0,.9);
z-index:2
}
.modal {display:none;z-index:1}
SCRIPT:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer").show();
$("body").css("overflow","hidden");
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
$("body").css("overflow","");
});
});

You need to get rid of your use of "overflow". I've included a link below to the Mozilla Developer Network docs for "overflow", but below is a quick quote explaining what's happening.
"hidden
Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container."
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Also, after one cycle of clicking Open and Close, if you were to click Open again, the word Close won't show up. That's because you're not using the .show() method to show that text upon clicking Open. Updated JavaScript below.
JavaScript:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer,.close-modal").show();
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
});
});

How can I make part of my page always be in the same position relative to the screen?

I'm making a website, and I have a nav bar and a main content section, the nav bar is at the top of the screen and the main content in near the bottom of the screen. However, if I change my screen height, the main content section stays in the same place, and it goes out of my browsers viewport/window and disappears, which is perfectly normal and expected. But what I want is for the main content section to always be at the same place at the bottom of the screen, no matter what the screen size/resolution/height is. How can I accomplish this?
My website is jeffarries.com and what I'm talking about is on my home page, if you need a visual.
I've used JavaScript, and I'm not very familiar with it.
I have no experience with jQuery, however I'm fine implementing a finished jQuery script.
Thanks for your Time and Energy!
Please let me know if any further information in needed.
UPDATE: Since this question appears to be unclear, take a visit to my website, you will see the text that says "here you can learn about me and my adventures", I want that text to appear at the bottom of the browser window when loaded, however, I want it to remain in usual flow, being on top of the "recent activity" box. Basically I want the margin on top of the text to change based on the browser window height, keeping the text at the bottom of the browser window.

You can use archive this via CSS3 VH property [ View Port Height ]. For that you have to make one container and add its height to 100vh.
Here is the live demo - https://jsfiddle.net/8dptzvye/
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
.container{height:100vh}
.container span{position:absolute; width:100%; display:block; left:0; bottom:0; text-aling:center; padding:20px; background:black; color:#fff}
<div class="container">
<div class="cover">Extra Infomation </div>
<span>here you can learn about me and my adventures</span>
</div>

You may be looking for position: fixed
EDIT
If you want to change the margin based on the window size, you can use jquery's resize
$(window).resize(function () { /* change margin of element */ });

JQuery Issue: Sticky menu shifts to the right when it sticks

Every time that the scroll bar reaches the sticky menu it shifts the menu over a few pixels. If you scroll down slowly on my website and watch the menu you can see it.
I'm using the JQuery plugin stickUp to accomplish the sticky menu. I found that the only way I could get the menu to stick to the top without jumping to the left was by putting the "buttons" class inside of another class called "menu" and setting the width of "menu" to 100%. But that just resulted in the tiny little jump you can see now.
<body>
<div id="page1">
<div id="p1content">
<h id="Name">Travis Morenz</h>
<p>Testing & Testing</p>
</div>
<div class='menu'>
<div id='buttons'>
<div>Home</div>
<div>Projects</div>
<div>About</div>
</div>
</div>
</div>
<div id="page2">
<div class='behindmenu'></div>
</div>
I tried setting up a JFiddle to make it easier to view but the sticky menu doesn't work inside of it.
The code, however, is the same. Any help would be greatly appreciated.

In your site, when you scroll down .menu stuckMenu isStuck is getting style and got position:fixed and top:0 but you have to add left:0px then div wont move.
just add left:0px to .menu stuckMenu isStuck and it will work. Please let me know if it wont help or for more explanation.
UPDATED
When you scroll down then by jquery there is class added to .menu stuckmenu and it gives position:fixed and top:0 means fixing the div at one place so you should remove the left part too by using left:0 so it will be in center of screen.(top:0 and left:0). I will update the answer as soon as i will get more clarification.
OFFTOPIC
Your content of page 2 will hide the button but if you will hover then it will look like bugs so i have a suggestion that in .menu stuckMenu class add background:white and it will look great..hope it will help. :)
In this id #p1content you have used css which is not good..to center this column you should use margin-left:auto margin-right:auto with width:80% and you column will be responsive also. Never use fix width, its not good practise.

Concerning your question why it was moving: It received some additional style. A position left of 8px.
See screenshot.
This plugin seems to change the position from relative to fixed.
Moreover it adds top- and left-properties.

It gets moved since position gets changed to position: fixed; when you scroll down and it then ignores the margin of the body, making its own margin bigger.
CSS
body {
margin: 0;
}

Side Panel in CSS

I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:

Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.

All major browsers and IE10 support flexbox. Not supported < IE10.

How to let a part of a "background-image" still visible when scrolling down

I'm recently facing a dilemma with my new Wordpress site.
I'm wondering how to keep a part of my header image visible when i'm scrolling down in the page.
For now, my header image is 75% of the page height, but when i'm scrolling down, the image disapear as it should be.
But what i want, is that a certain part of it, let's say 20%, stay visible at the top in a "fixed" position.
So, to resume in pictures :
What i have without scrolling :
http://i.stack.imgur.com/2NxcQ.jpg
What i would like to have when scrolling down :
http://i.stack.imgur.com/nwoQw.png
I don't know if i'm clear enough, though, thanks to everyone who will try to help me on this !

You can use a jquery plugin like sticky:
<div class="top">Content</div>
<div class="header"></div>
<div class="content">
....
</div>
Then for CSS, you apply your image:
.header
{
background-image: url('http://placekitten.com/200/300');
height:300px;
width: 100%;
}
Then in your js, you can use the sticky plugin:
$(".header").sticky({topSpacing:-250});
Notice the negative number on the spacing offset, which allows most of the image to be scrolled.
Example fiddle: http://jsfiddle.net/CZYav/2/

I have a demo here: http://jsbin.com/ubolos/1/edit
Just keep tracking you scrolled distance and modify the background property of the div when you find that user has scroll too far down. No other plugins of jQuery needed.