We Keep Coding

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>

jQuery .scroll() trigger with window height

I'm trying to trigger a function when the mouse wheel is spun, however the div is the height of the window, therefor isn't scrollable and isn't triggering my function. This is the code I am using to test if it works;
jQuery(document).ready(function($) {
$( document ).scroll(function () {
console.log('it works!');
});
});
You can see the full fiddle here; https://jsfiddle.net/8wr8p4ub/1/
If I change the height to an exact value, it triggers, however how can I achieve this when the element isn't scrollable?

You have to check with mousewheel event here and not document scroll. Since in your case document is not scrolling.
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
console.log("scroll up");
}
else {
// scroll down
console.log("scroll down");
}
});
* {
padding: 0;
margin: 0;
}
.hi {
height: 100vh; // Change to 1200px and see the output in the console.
width: auto;
background: #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hi"></div>

You don't need to bother yourself about the scroll once the page content is not so long to bring it out. But from what i saw there, your code is fine, and it will work whenever the content exceeds the minimum page scroll
Better still, you can make use of the mousewheel event in JS

You need to use mousewheel event handler:
$('div').on('mousewheel', function(event){
if(event.originalEvent.wheelDelta / 120 > 0) {
console.log('scrolled up');
} else {
console.log('scrolled down');
}
});

jQuery Overflow: Hidden on Parent, Detect if Child is Actually On Visible

I'm having an issue with this jQuery that is blowing my mind. I've tried three different JS and jQuery functions people suggested online for accomplishing this and can't seem to get anything to work.
I'm trying to hide the class .arrow-up when .first is actually visible on the screen and hide the class .arrow-down when .last is visible on the screen.
Sounds simple enough, right?
Well the parent element has overflow: hidden on it (like most carousels–they really are from hell). Anyone know how to do this? I'd really appreciate any help, JS really isn't my strongest by any means...
Here's my current jQuery–
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=300"
}, 300);
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=300"
}, 300);
});
});
In this, .vid-list-container is the parent with overflow: hidden on it and .first and .last are both inside the container. The arrow classes are both outside of the container.
Built this pen for anyone who wants to play around with it.
http://codepen.io/seancrater/pen/waPNEW
Thanks!

This should work. Notice however that I used opacity:0, so the arrow can still be clicked. You need to change that!
function checkDownArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() != 0){
$('.arrow-up').css('opacity',1);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) >= $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',0);
}
},350);
}
function checkUpArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() == 0){
$('.arrow-up').css('opacity',0);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) < $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',1);
}
},350);
}
checkDownArrow();
checkUpArrow();
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=173"
}, 300);
checkDownArrow();
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=173"
}, 300);
checkUpArrow();
});
});

EDIT
Okay, I see you have a different problem... may I suggest using a different approach? Something like this.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="vid-item">
...
</div>
<div class="vid-item">
...
</div>
</div>
</div>
CSS:
.outer-wrapper {width:200px; height:150px; overflow:hidden;}
.inner-wrapper {height:auto; margin-top:0;}
.vid-item {width:200px; height:150px;}
JS:
var itemHeight = $('.vid-item').first().height();
var wrapperHeight = $('.inner-container').height();
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(itemHeight - margin > wrapperHeight) {
$('.inner-container').css('margin-top', (itemHeight-wrapperHeight) + 'px');
$('.arrow-down').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin-itemHeight) + 'px');
}
$('.arrow-up').removeClass('hidden');
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(margin + itemHeight >= 0) {
$('.inner-container').css('margin-top', '0');
$('.arrow-up').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin+itemHeight) + 'px');
}
$('.arrow-down').removeClass('hidden');
});

Scroll up button for website not working properly

I'm trying to put a "scroll up" button on my website, and for some reason it isn't working correctly. The button does appear on the page, but for whatever reason whenever I attempt to click it it just redirects me to the front page of the site. I have no idea what I'm doing wrong.
<script>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="100"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="1000"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function(){$("#toTo_button").scrollToTop();});
</script>
<style>
#toTo_button { width:70px;text-align:center;padding:5px;position:fixed;bottom:10px;right:12px;cursor:pointer;color:#666;text-decoration:none; }
#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); }
#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); }
</style>
<div id="ups">
<img src="http://full4dl.ucoz.com/Support/ups.png" alt="" />
</div>

You have to prevent the default action when you click the anchor, as <a href="/" ... will surely redirect to the home page:
$(function () {
$.fn.scrollToTop = function () {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() >= "100") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function () {
if ($(window).scrollTop() <= "1000") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function (e) {
e.preventDefault(); // ding ding ding
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function () {
$("#toTo_button").scrollToTop();
});

You have a couple issues with your code.
First, you have to trigger the function by binding it to a click event.
$('#toTo_button').click(function(event) {
//do your scroll magic here
});
Secondly, when you trigger that click event, you should pass the event and call event.preventDefault(). This prevents the browser from automatically calling a redirect.

Use event.preventDefault() on the click event of the anchor tag, this will stop the default redirect to the homepage of the site(as you have written a href="/").
This should resolve the issue.

How to detect scroll position of page using jQuery

I am having trouble with jQuery functionality on my website. What it does, is that it uses the window.scroll() function to recognize when the windows changes its scroll position and at the change calls a few functions to load data from the server.
The problem is the .scroll() function is called as soon as there is even a little change in the scroll position and loads data at the bottom; however, what I wish to achieve is to load new data when the scroll/page position reaches at the bottom, like it happens for Facebook feed.
But I am not sure how to detect scroll position using jQuery?
function getData() {
$.getJSON('Get/GetData?no=1', function (responseText) {
//Load some data from the server
})
};
$(window).scroll(function () {
getData();
});

You can extract the scroll position using jQuery's .scrollTop() method
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Do something
});

You are looking for the window.scrollTop() function.
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > some_number) {
// do something
}
});

Check here DEMO http://jsfiddle.net/yeyene/Uhm2J/
function getData() {
$.getJSON('Get/GetData?no=1', function (responseText) {
    //Load some data from the server
})
};
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
// getData();
}
});

$(window).scroll( function() {
var scrolled_val = $(document).scrollTop().valueOf();
alert(scrolled_val+ ' = scroll value');
});
This is another way of getting the value of scroll.

Now that works for me...
$(document).ready(function(){
$(window).resize(function(e){
console.log(e);
});
$(window).scroll(function (event) {
var sc = $(window).scrollTop();
console.log(sc);
});
})
it works well... and then you can use JQuery/TweenMax to track elements and control them.

Store the value of the scroll as changes in HiddenField when around the PostBack retrieves the value and adds the scroll.
//jQuery
jQuery(document).ready(function () {
$(window).scrollTop($("#<%=hidScroll.ClientID %>").val());
$(window).scroll(function (event) {
$("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$(window).scrollTop($("#<%=hidScroll.ClientID %>").val());
$(window).scroll(function (event) {
$("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
});
});
//Page Asp.Net
<asp:HiddenField ID="hidScroll" runat="server" Value="0" />

You can add all pages with this code:
JS code:
/* Top btn */
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
var top_btn_html="<topbtn id='toTop' onclick='gotoTop()'>↑</topbtn>";
$('document').ready(function(){
$("body").append(top_btn_html);
});
function gotoTop(){
$("html, body").animate({scrollTop: 0}, 500);
}
/* Top btn */
CSS CODE
/*Scrool top btn*/
#toTop{
position: fixed;
z-index: 10000;
opacity: 0.5;
right: 5px;
bottom: 10px;
background-color: #ccc;
border: 1px solid black;
width: 40px;
height: 40px;
border-radius: 20px;
color: black;
font-size: 22px;
font-weight: bolder;
text-align: center;
vertical-align: middle;
}

$('.div').scroll(function (event) {
event.preventDefault()
var scroll = $(this).scrollTop();
if(scroll == 0){
alert(123)
}
});
This code for chat_boxes for loading previous messages

GET Scroll Position:
var scrolled_val = window.scrollY;
DETECT Scroll Position:
$(window).scroll
(
function (event)
{
var scrolled_val = window.scrollY;
alert(scrolled_val);
}
);