We Keep Coding

When I scroll down a bit I want it to scroll below the slider

I am trying to make a slider and when I scroll down I want it to jump into the content
I tried this but it doesn't feel smooth
var up = 0;
$(window).scroll(function()
{
if ($(window).scrollTop()> 50 && up==0)
{
$("html, body").animate({ scrollTop: (
($(".vc_custom_1449248739486").offset().top)-50) }, 500);
up++;
}
if( $(window).scrollTop()<20)
{
up=0;
}
});
I want to scroll and to slide it down to the content.
You can check the code and inspect it here:
http://junglelodge.nevadastudios.com/

You can try this for smooth scrolling:
window.scrollTo({
top: document.querySelector(".vc_custom_1449248739486").offsetTop - 50,
left: 0,
behavior: 'smooth'
});

How do we fixed the button at the top on Window scrolling?

i am trying to fix the button on top when we scroll the window ,as soon as the button reach on the top then to be fixed, please need your help, i am using javascript code for this or if you have suitable code related to javascript or jquery then please suggest me,
i am showing a snapshot that clear you that what i want to do in this images,
image is here please click to see clearly my problem
This is my button code
HELPLINE NUMBER
and
This is javascript code what i have tried:
<script>
window.onscroll= function(){ myfunc(); }
var location_v=document.getElementById("NUMBER");
var pixtop=location_v.offsetTop;
function myfunc()
{
if(window.pageYOffset >= pixtop )
{
//var a=document.getElementById('NUMBER');
location_v.classList.add('stick');
}
else
{
a.classList.remove('stick');
}
}
</script>
and the css code is below:
.stick {
position:fixed;
top: 10px;
width: 100%;
}
and please also don't forget to tell me what i am missing, if you have any conceptual javascript or jquery code...

Here is a script that can do the trick for you:
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 90) {
$('#NUMBER').addClass('stick');
}
if ($(window).scrollTop() < 91) {
$('#NUMBER').removeClass('stick');
}
});
});
And what it does is on each scroll event it checks the scrolling position from top of a window and using if check it either adds or removes your pre-made stick class. But of course you have to chose your own numbers in this if check.
I have also played around with a code snippet, so you can see how it works
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('#NUMBER').addClass('stick');
}
if ($(window).scrollTop() < 11) {
$('#NUMBER').removeClass('stick');
}
});
});
body {
height: 600px;
}
.stick {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="NUMBER">Press me</button>

Collapse menu not working with anchor links

I've build a menu that collapse after you scroll down more than 250px from the top and returns to its original state when you go back to the top. But my website has some anchorlinks that link to the middle of the home page. When i go directly to these links the menu doesn't work. I have to scroll first. Is their a way to fix this?
This is the code i used:
<script>
jQuery(function () {
jQuery('.fixed').data('size', 'big');
});
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 250) {
if (jQuery('.fixed').data('size') == 'big') {
jQuery('.fixed').data('size', 'small');
jQuery('.fixed').stop().animate({
top: '-125px'
}, 600);
jQuery('.navbar-nav').stop().animate({
top: '15px'
}, 600);
jQuery('.dmbs-header-img').stop().animate({
opacity: '0'
}, 200);
jQuery('.logo-simple').stop().delay(200).animate({
top: '120px'
}, 600);
}
} else {
if (jQuery('.fixed').data('size') == 'small') {
jQuery('.fixed').data('size', 'big');
jQuery('.fixed').stop().animate({
top: '0px'
}, 200);
jQuery('.navbar-nav').stop().animate({
top: '0px'
}, 200);
jQuery('.dmbs-header-img').stop().animate({
opacity: '1'
}, 100);
jQuery('.logo-simple').stop().animate({
top: '-50px'
}, 200);
}
}
});
</script>

Just trigger the scroll event on anchor click (or on any other event you need).
jQuery('a').click(function(){
jQuery(window).scroll();
});
or
Move your code inside a function and call it on scroll, or on anchor click:
function checkScroll(){
if(jQuery(window).scrollTop() > 250)
{
// Your code
}
else
{
// Your code
}
}
jQuery(window).scroll(function(){
checkScroll();
});
jQuery('a').click(function(){
checkScroll();
});
The second solution may give you more flexibility.

Back to top button doesn't click - jquery

I am trying to achieve the "back to top" feature on a page through simple jquery. The "BACK TO TOP" button appears/disappears as expected.
When it appears if I click on it, I expect it to go to the top of the page, instead nothing happens. I am not sure what's going wrong.
Here's the code:
css:
#btoTop {
padding: 15px 10px;
background: #1f242a;
color: #fff;
position: fixed;
bottom: 0;
right: 15px;
display: none;
cursor:pointer;
cursor:hand;
width:130px;
height:40px;
}
html:
<div id='btoTop'>BACK TO TOP</div>
js:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
Note: If I call the click function inside the $(window).scroll(), I am able to click the button. But it flickers and doesn't work well with window resize.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
});

You're binding click on your button every single time you scroll, which is unnecessary. You should change it:
$(document).ready(function () {
$(window).scroll(function () {
if( $(window).scrollTop() > 0 ) {
$("#btoTop").fadeIn("slow");
} else {
$("#btoTop").fadeOut("slow");
}
});
// Bound a single time
$("#btoTop").click(function ( event ) {
event.preventDefault();
console.log("Clicked the button");
$("html, body").animate({scrollTop:0 },"slow");
});
});
This might not be the problem, but should be changed to avoid strange behaviours in your code.

I figured out the button was not yet available in the DOM when I was trying to click it.
Adding a timer on it worked pretty good. Hope this helps someone out there with similar issue...
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$timeout( function() {
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
}, 500);
});

Velocity.js - stopping animation callback

I have this code:
$(window).scroll(function () {
if ($(this).scrollTop() > ($animate.headline.height() + 100)) {
$animate.header.velocity({height: "50px"}, { queue: false });
} else {
$animate.header.velocity({height: "100px"}, { queue: false });
}
});
If user scrolls xxx pixels from top then animation should start, and that works just fine.
One thing I just noticed and it bothers me - every time I scroll, velocity animation is checking that scrollTop, so overall animation isn't smooth when I'm scrolling, because before animation is triggered function is checking scroll.
Is there any other way to make it smooth?
Example:
http://codepen.io/anon/pen/bIkqF

Would you prefer a CSS approach instead?
Set your header's css to :
-webkit-transition: all 0.5s;
position:fixed;
top:0;
left:0;
Add a new class for the desired height:
.shrink{
height:50px;
}
And in you js toggle the class :
var header = $('.header');
$(window).on('scroll', function () {
if ($(this).scrollTop() > (header.height() + 20)) {
header.addClass('shrink');
} else {
header.removeClass('shrink');
}
});
Tinker with the seconds property of transition for a smoother effect.
This way the GPU does the heavy lifting and class toggles performance hit is negligible.
Demo

You should throttle your check with some library like Ben Alman's one : https://raw.githubusercontent.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js.
Check this documentation page : http://benalman.com/projects/jquery-throttle-debounce-plugin/.
For your example, you can use it like this :
$(window).scroll($.throttle(250, checkTop));
function checkTop() {
if ($(this).scrollTop() > ($animate.headline.height() + 100)) {
$animate.header.velocity({height: "50px"}, { queue: false });
} else {
$animate.header.velocity({height: "100px"}, { queue: false });
}
}