We Keep Coding

How to make a button go down when scrolling? (CSS)

It's header. I want to make these 2 buttons go down with Joblist text when I scroll down.
It SHOULDN'T be like that. I mean these 2 buttons need to stay below the logo always. and when I scroll down, logo and buttons should go down and disappear.
<header>
<div class="header-btn">
Button 1
Button2
</div>
</header>
css
header > .header-btn > a { /* Header buttons styling */
display: inline-block;
text-decoration: none;
font-size: 17px;
color: #f6f6f6;
background-color: rgba(77,85,106,0.8);
letter-spacing: .1em;
padding: 1em 2em;
border-radius: 30px;
border: 1px solid #d6d6d6;
position: absolute;
top: 65%;
margin: 0 15px;
font-family: 'Syncopate', sans-serif;
}
forgot to mention that Im using js for how fast or slow that Joblist text disappears.
var pContainerHeight = $('header').height();
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if (wScroll <= pContainerHeight) {
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /4 +'%)'
});
}

You should make those buttons go down with Javascript. Simply add an event listener on the page scroll (as you already do) and, as the user scrolls, add the difference on the position of those two buttons.
Something like this JSFiddle should work:
var original_top = $(".buttons").offset().top
$(window).scroll(function(){
$(".buttons").offset({top: $(this).scrollTop() + original_top})
})

Have you tried setting header position:relative and .header-btn position:absolute. The relative position will scroll and the absolute is in relation to its relative container so it will also scroll.

change position to relative from absolute

Back to Top button sliding from bottom right hand side corner of the screen

I've been trying to integrate a custom back to top button on a web page, but I can't move (slide) it with JQuery. What I want is to slide the button from the invisible part of the screen right to left when page scroll reaches a particular amount, and slide it from left to right (to the invisible part of the screen) when scroll amount is less than the specified.
Any advice or a fragment of code would be of great value!
Here is the code:
custom css:
a.custom-back-to-top {
width: 80px;
height: 40px;
color: white;
text-align: center;
vertical-align: middle;
font-weight: bold;
white-space: nowrap;
position: fixed;
z-index: 9999;
right: -100px;
bottom: 20px;
background: #444;
}
and this is the jquery
$('body').append('Back to Top');
var scrollAmount = 1000;
$(window).scroll(function() {
if ($(window).scrollTop() > scrollAmount)
{
$('a.custom-back-to-top').animate({'right':'20px'}, 'slow');
}
else
{
$('a.custom-back-to-top').animate({'right':'-100px'}, 'slow');
}
});
$('a.custom-back-to-top').click(function() {
$('body, html').animate({ scrollTop: 0 }, 1000);
return false;
});

$(window).scroll(function () {
var button_threshold = someNumber;
if ($(window). scrollTop > button_threshold) {
// Move button into view
} else {
// Move button out of view
}
});

Make Div "catch" top of page when scrolling

I have a header on a website that is fixed 20px from the top of the page.
However, I want this to catch the top of the page when scrolling and become fixed to the top of the screen once the user has scrolled that 20px down.
CSS
#header{
padding: 0px 0px 0px 0px;
background: url(../images/header-fill2.jpg) repeat-x top;
position: fixed;
height: 60px;
width: 100%;
top: 20px;
z-index: 5000;
}
I imagine some form of JavaScript is required but have little to no JavaScript experience, so any help would be greatly appreciated.

Just listen for the scroll event and read the value of $(window).scrollTop() and set the top according to that.
Something like:
$(window).on('scroll', function() {
$('#header').css('top', $(window).scrollTop() > 20 ? '0px' : '20px');
});
Example on jsFiddle

The scroll event tells you when the window scrolls. Then, use the scrollTop to find out how much closer to 0 to go:
$(window).on("scroll", function() {
$("#header").css("top", Math.max(0, 20 - $(window).scrollTop()));
});
Live Example
Or to avoid constantly re-creating objects:
(function() {
var $wnd = $(window),
$header = $("#header");
$wnd.on("scroll", function() {
$header.css("top", Math.max(0, 20 - $wnd.scrollTop()));
});
})();
Live Example

Thats how I do that with jQuery.
The position is also cached, for performance reasons:
Here is a fiddle:
http://jsfiddle.net/StephanWagner/u3yrS/
$(document).ready(function() {
var cfixed_nav = false, wscroll;
var setScroll = function() {
wscroll = $(window).scrollTop();
var fixed_nav = wscroll > 20; // Set pixel amount here
if (fixed_nav != cfixed_nav) {
$('body')[fixed_nav ? 'addClass' : 'removeClass']('fixed');
cfixed_nav = fixed_nav;
}
};
setScroll();
$(document).scroll(setScroll);
});
With CSS you set the fixed position:
.fixed #header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%
}
Also remember, that when the header gets the fixed position, those 20px of the header are missing. So you can add a body padding for example:
.fixed {
padding-top: 20px;
}
Or you add an element with 20 Pixel height and swap display none / block depending on the .fixed class in the body

Sliding a div from right > to left <

I have been searching for a code snippet that I assumed would already be out there somwhere. There are many different variations that I have found but none of which are best suited for me. I have attempted to modify jsfiddles ive found and tweak other examples but to no avail.
As I have little to no prior experience with javascript and Jquery languages I hoped someone on here could help.
In my current project I have a single page in which all the content is loaded. currently I have six divs all hidden off screen to the right. with a vertical navigation menu sitting on the left. What I want is for when a link with the assigned div is clicked, that targeted div slides on screen from right to left and stops next to the navigation menu.
The twist, however is when a new link is clicked the content of the previous div to slide off screen allowing the newely selected div to replace it.
Hopefully I have explained myself well enough.
The content divs I want slided are =
id="content-one"
id="content-two"
and so on.
Any solutions or pointers in the right direction would be extreamly usefull many thanks in advance.
This is what i was originally trying to modify but i was unsuccessful...
$(document).ready(function(){
$("#navigation li a").on("click", function(e){
e.preventDefault();`enter code here`
var hrefval = $(this).attr("href");
if(hrefval == "#content-one") {
var distance = $('#container').css('right');
if(distance == "auto" || distance == "0px") {
$(this).addClass("open");
activateSlider();
} else {
deactivateSlider();
}
}
}); // end click event handler
// $("#closebtn").on("click", function(e){
// e.preventDefault();
// closeSidepage();
// }); // end close button event handler
function activateSlider() {
$('#container').animate({
right: '350px'
}, 400, 'easeOutBack');
}
function deactivateSlider(){
$("#navigation li a").removeClass("open");
$('#container').animate({
right: '0px'
}, 400, 'easeOutQuint');
}
});

Try like this,
Here .panel your sliding div class
JS Fiddle
$(document).ready(function() {
var settings = {
objSlideTrigger: '#trigger', // link button id
objSlidePanel: '.panel' // slide div class or id
}
$(settings.objSlideTrigger).on('click', function() {
//If the panel isn't out
if (!$(settings.objSlidePanel).hasClass('out')) {
slidePanelOut();
} else if ($(settings.objSlidePanel).hasClass('out')) {
slidePanelIn();
}
});
function slidePanelOut() {
//Animate it to left
$(settings.objSlidePanel).animate({
'right': '-67%'
});
//Add the out class
$(settings.objSlidePanel).addClass('out');
}
function slidePanelIn() {
//Otherwise, animate it back in
$(settings.objSlidePanel).animate({
'right': '-89%'
});
//Remove the out class
$(settings.objSlidePanel).removeClass('out');
}
});
.panel {
width: 85%;
padding: 2%;
position: fixed;
right: -89%;
top: 46px;
z-index: 2;
background: #2F2F2F;
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
border-radius: 1% 1% 1% 1%;
border-radius: 5px;
}
.trigger {
width: 8%;
text-align: center;
color: goldenrod;
position: absolute;
top: 26px;
padding: 0.5% 0%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background: #2F2F2F;
right: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="panel" class="panel">
<!-- Trigger -->content
</div>
<a id="trigger" class="trigger">click here</a>

Float a div at the bottom right corner, but not inside footer

I'm trying to implement a "go to top" button that floats at the bottom right corner of a page. I can do this with the following code, but I don't want this button to enter the footer of my page. How can I stop it from entering the footer and stay at the top of it when user scrolls the page down to the bottom of the page?
CSS
#to-top {
position: fixed;
bottom: 10px;
right: 10px;
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: #f7f7f7;
color: #333;
text-align: center;
cursor: pointer;
display: none;
}
JavaScript
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#to-top').fadeIn();
} else {
$('#to-top').fadeOut();
}
});
$('#to-top').click(function() {
$('body,html').animate({scrollTop:0},"fast");
});
HTML
<div id="to-top">Back to Top</div>
EDIT
Here is a drawing of how it should look like. The black vertical rectangle is a scroll bar. The "back to top" button should never enter the footer region.
Here is a jsfiddle.

The solution turned out to be more complicated than I thought. Here is my solution.
It uses this function to check if footer is visible on the screen. If it is, it positions the button with position: absolute within a div. Otherwise, it uses position: fixed.
function isVisible(elment) {
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elment).offset().top;
return y <= (vpH + st);
}
$(window).scroll(function() {
if($(this).scrollTop() == 0) {
$('#to-top').fadeOut();
} else if (isVisible($('footer'))) {
$('#to-top').css('position','absolute');
} else {
$('#to-top').css('position','fixed');
$('#to-top').fadeIn();
}
});
jsfiddle

Increase the value of bottom: 10px; than the height of footer.
I saw your screenshot now,just add some padding-bottom to it.

Solution
$(document).ready(function(){
$(window).scroll(function(){
btnBottom = $(".btt").offset().top + $(".btt").outerHeight();
ftrTop = $(".footer").offset().top;
if (btnBottom > ftrTop)
$(".btt").css("bottom", btnBottom - ftrTop + $(".btt").outerHeight());
});
});
Fiddle: http://jsfiddle.net/praveenscience/BhvMg/
You forgot to give the z-index, that prevents it from being on top!
z-index: 999;
Or if it is overlapping with the footer of your page, you can increase the co-ordinates.
bottom: 50px;
Your question is still not clear, "stop it from entering the footer". Does it overlap?