We Keep Coding

How to offset top bar height dynamically when scrolling down

I am trying to offset an announcement bar when scrolling down, taking into consideration that the height of the bar is more important on smaller devices.
Here's an example of what I want to achieve : https://8kflexwarm.com/
So I ended up with this piece of code, which is working, but I feel like it is not optimized, not clean code. I figure there must be a way to offset $('.announcement-bar') instead of doing it manually with window size.
Also, why is this code not working when I refresh the screen and I'm not on top of the page ?
Is there a way to improve this code without using a library ?
if($(window).width() >= 686){
var a = $(".site-header").offset().top;
function scrollListener(){
if($(document).scrollTop() > a)
{
$('.site-header').css({"margin-top":"-40px"});
$('.site-header').css({"transition":"0.4s"});
} else {
$('.site-header').css({"margin-top":"0px"});
$('.site-header').css({"transition":"0.4s"});
}
};
$(document).scroll(scrollListener);
scrollListener();
} else if($(window).width() >= 370) {
var a = $(".site-header").offset().top;
function scrollListener(){
if($(document).scrollTop() > a)
{
$('.site-header').css({"margin-top":"-65px"});
$('.site-header').css({"transition":"0.4s"});
} else {
$('.site-header').css({"margin-top":"0px"});
$('.site-header').css({"transition":"0.4s"});
}
};
$(document).scroll(scrollListener);
scrollListener();
} else {
var a = $(".site-header").offset().top;
function scrollListener(){
if($(document).scrollTop() > a)
{
$('.site-header').css({"margin-top":"-90px"});
$('.site-header').css({"transition":"0.4s"});
} else {
$('.site-header').css({"margin-top":"0px"});
$('.site-header').css({"transition":"0.4s"});
}
};
$(document).scroll(scrollListener);
scrollListener();
};

Please provide a codePen, it makes it easier to help you with your question.
I came up with this untested piece of javascript:
var myApp = (function(app) {
const $elements = {
siteHeader = null,
}
function setPosition() {
const scrollTop = $(document).scrollTop()
const offsetTop = $elements.siteHeader.offset().top
if(scrollTop > offsetTop){
$elements.siteHeader.css({'margin-top':`${$elements.siteHeader.height() * -1}px`})
} else {
$elements.siteHeader.css({'margin-top':'0px'})
}
}
function initialize() {
// Wait for all elements to be created
$(function() {
$elements.siteHeader = $('.site-header')
setPosition()
$(document).scroll(setPosition)
$(document).resize(setPosition)
})
}
initialize()
return app;
})(myApp || {})

Hide Div on Scroll with JQuery

I'm sure this is a trivial problem but I cannot seem to figure it out. I'm trying to fade a side bar in and out, and because I have a few of them in my website, I need to give them individual IDs for Javascript.
This code works
$(window).on("scroll", function() {
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$("#menu").fadeOut();
} else {
$("#menu").fadeIn();
}
});
This doesn't
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
menu.fadeOut();
} else {
menu.fadeIn();
}
});
In the latter piece, all I'm trying to do is assign a variable.
Here's the fiddle: https://jsfiddle.net/gavinfriel/nhovvj6q/1/
Your help would be appreciated.

You have to wrap it in a jQuery call to make it a jQuery object. Otherwise it cannot find the fadeOut and fadeIn functions:
var menu = $("#menu");
or
var menu = $(document.getElementById("menu"));

You need to use jquery to convert menu to jQuery object.
So it will have the fade property
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$(menu).fadeOut();
} else {
$(menu).fadeIn();
}
});
Because if you use menu.fadeOut() it will generate error because menudoesn't have fade property

Checkout this it will work.
$(window).on("scroll", function() {
var menu = $("#menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
menu.fadeOut();
} else {
menu.fadeIn();
}
});

As others have mentioned, you've declared a JavaScript variable but are trying to use it as a jQuery object.
I would personally go with PierreDuc's answer but if you refactor your code slightly you can carry on using the vanilla JS declared vaiable, but pass the variable slightly differently:
var test = document.getElementById("test");
$(test).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test">
TEST
</div>
In your 2nd code, this might look as follows:
$(window).on("scroll", function() {
var menu = document.getElementById("menu");
var scrollPos = $(window).scrollTop() - 100 ;
if (scrollPos < 100) {
$(menu).fadeOut();
} else {
$(menu).fadeIn();
}
});

Sorting icon issue with Jquery Datatable fixd header

I have a follwoing script.
It enables the fixed header for a jquery datatable..
var alertion = 0;
$(document).ready(function()
{
$(window).on('scroll', function()
{
var scrollTop = $(this).scrollTop();
var topDistance = $("#campaigns_list").offset().top;
if(topDistance < scrollTop)
{
if($(".fixedHeader").length == 0)
{
new $.fn.dataTable.FixedHeader(campaign_overview_table, {"offsetTop": 82},{ "top": true });
}
else
{
$(".fixedHeader").not(':last-child').remove();
}
}
else
{
$(".fixedHeader").remove();
}
});
});
The datatable is initialized by this way
campaign_overview_table = $("#campaigns_list").DataTable();
Now every thing runs fine, but when the fixed header appears and i click on a column to sort it, the sorting arrow doesn't change
How can I solve this issue?

Pop up text after scrolling certain distances is not working

I'm trying to get text to pop up at a fixed location at different y-scroll intervals however, I can't seem to chain the scripts correctly. It seems to skip the first action of displaying the first message.
Code: http://jsfiddle.net/k8bnd/
var startY = 1500;
var stopY = 2000;
$(window).scroll(function(){
checkY();
});
function checkY()
{
console.log($(window).scrollTop());
if($(window).scrollTop() > startY && $(window).scrollTop() <= stopY)
{
console.log("Show");
$('.titleTwo').show();
}
else
{
console.log("Hide");
$('.titleTwo').hide();
} }
checkY();

Your functions should have different names. Try
var startY1 = 900;
var stopY1 = 1800;
var startY2 = 1801;
var stopY2 = 2500;
$(window).scroll(function(){
checkY();
});
function checkY()
{
console.log($(window).scrollTop());
if($(window).scrollTop() > startY1 && $(window).scrollTop() <= stopY1)
{
console.log("Show");
$('.foxedDiv').show();
}
else
{
console.log("Hide");
$('.foxedDiv').hide();
}
if($(window).scrollTop() > startY2 && $(window).scrollTop() <= stopY2)
{
console.log("Show");
$('.foxedDivved').show();
}
else
{
console.log("Hide");
$('.foxedDivved').hide();
}
}
checkY();
Fixed Fiddle:
http://jsfiddle.net/k8bnd/1/

This is happening because you have overwritten the previous values/functions. To make this more dynamic you can add data-* attributes to each message element specifying which positions they are valid for. And then in the scroll event check each element's position data, if the window is within that range show it, otherwise hide it.
HTML
<!-- Changed the classes both elements had to foxedDiv
so that we can select them as a group and loop over them -->
<div class="foxedDiv" data-position="900,1800">
MESSAGE 1
</div>
<div class="foxedDiv" data-position="1801,2500">
MESSAGE 2
</div>
JS
//Note you do not need to make an anonymous
//function just to do the call for checkY
//just pass the function
$(window).scroll(checkY);
function checkY(){
//save this value so we dont have to call the function everytime
var top = $(window).scrollTop();
console.log(top);
$(".foxedDiv").each(function(){
var positionData = $(this).data("position").split(",");
if(top > positionData[0] && top <= positionData[1]){
console.log("Show");
$(this).show();
} else {
console.log("Hide");
$(this).hide();
}
});
}
checkY();
JSFiddle Demo

Prevent scrolling jquery script from running twice

I'm new to jquery and have put together the following code to make a DIV appear after a set scroll-down amount. If scrolling back up, the DIV disappears. Optionally, once the DIV has appeared, there is a link to close it. This all works as intended, apart from that I only want the script to run once. At the moment if I scroll back up, the yellow box appears again. How can I ensure the box stays closed? As another option, could I integrate cookies or localStorage?
Many thanks! Russ.
Javascript:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
return false;
});
});
Here is the jsfiddle link to my code: jsfiddle link

You can remove the class to ensure the box stays enclosed with removeClass(). Or directly $(".box").remove() after your animation.
You can store this choice with cookie but if the client deletes his cookies, it's lost.

You can remove event scroll from window and for localStorage do something like that:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
if(localStorage['noNotification'] == 'true'){
$(window).off('scroll');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
$(window).off('scroll');
localStorage['noNotification'] = 'true';
return false;
});
});

try this http://jsfiddle.net/AbwXu/4/
var notdisplayed=true;
$(function(){
var target = $(".box");
if($(window).scrollTop() > 30){
target.hide();
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if(pos > 30 && notdisplayed){
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
notdisplayed=false;
}
});
$('a.close').click(function() {
$($(this).attr('href')).slideUp();
notdisplayed=false;
return false;
});