We Keep Coding

How to stop fixed header overlapping scrollbar

I'm currently face an issue with my fixed 100% width header overlapping the scroll bar. I need the overflow-x:hidden as I have CSS animations which fly in and cause horizontal scrollbars.
Here is the JS Fiddle Code: https://js fiddle.net/kanwu3mc/1/
Any help greatly appreciated.

A quick solution would be to add the following to your scroll event callback:
header.style.width = `${document.body.scrollWidth}px`;
However, I would suggest that you consider implementing a largely CSS solution for such tasks. Consider making the header position: sticky and adding a new teal color class to the element when the scroll event is triggered.

This is a problem
html, body{
...
height:100%;
...
}
change to
html, body{
...
min-height:100%;
...
}
It's incorrect to fix the height of html and body that way. Only min-height allowed in this case.

How can I hide a scrollbar smoothly?

I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance

Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.

I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/

You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}

This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});

Footer will not position itself at the bottom of page

I have this footer that will not stick to the bottom of the page.
I think the issue is with my HTML and body not spanning the entire site but I just cannot find the exact place to correct this. I know its a big no-no to link to my page but I simply don't know what code to post here.
I cannot set the content to static instead of absolute because then my menu items will start pushing the content divs around when they open.

To fixed position into bottom you can try this code
Html:
<div class="tofix">
<p>Fixed this div into bottom</p>
</div>
Css:
.tofix{
width:300px;
position:fixed;
bottom:0;
}

The problem occurs because of your #content. You just try to change its position as following:
#content{
position : static;
}
Or you just simply remove it because the position is set as static by default.

Remove the position:absolute from your #content.
Also It worked when I first opened the link, please don't change the live code while asking the question.

Issue displaying images inline

I am trying to display a number of images on the same line without wrapping down. I have tried just about everything I know to make this work with no luck! I am trying to make an image selector for a slideshow that will be loaded into the page with ajax / jQuery and I don't want it to take up a ton of screen realestate. Ideally I want to be able to scroll horizontally and select my images.
<script type="text/javascript">
$(document).ready(function () {
test();
});
function test(){
for (var i=0; i < images.length; i++) {
$("#test").append("<img src='"+images[i]+"' style='width:250px; height: 250px; margin:10px; display:inline'/>");
};
}
</script>
<div id="test"></div>
Usually I have 0 issues with HTML so I feel kind of silly for asking and I'm sure it's a very simple mistake I am making. Any help would be greatly appreciated!

Try applying nowrap to div#test:
#test{ white-space:nowrap; }
You may also need another wrapper around div#test with overflow:auto; then if you want the horizontal scroll.

Try float:left in the images or try to wrap the images in a div and then try float:left

Try float:left in the <img> tags style. If it doesn't help, try changing display:inline to display:inline-block.

try float:left on images
and I see that you haven't declared the images array(hope you have in your original code)

Horizontally fix element

Using position:fixed fixes an element both vertically and horizontally, but I want my element only to remain horizontally fixed. That is, I want it to scroll vertically with the rest of the page.
Is there any CSS way of doing this? If not, would monitoring scroll offsets and then moving the element be the right approach?

I ended up doing something like this:
.fixThisHorizontally {
position:absolute;
z-index:100;
}
Then,
jQuery(window).scroll(function() {
jQuery('.fixThisHorizontally').css('left', document.body.scrollLeft);
});
Thanks to all who answered.

position:absolute;overflow-x: hidden; overflow-y: scroll;
did you try these

I don't think this is possible entirely with CSS. I would, indeed, use position:absolute and use JavaScript to change the top css value when the page is scrolled.