Develop Reference

Fixed div scroll stop after

I am working on a menu, that is fixed to the right side of the page. I am using some JavaScript that keeps the menu in it's fixed position until the site reaches a specific spot (243px from the top - which clears my header). All of this is working as I intended...but I'm looking for a way for the menu to stop scrolling at a specific number of pixels from the bottom (To clear my footer - 600px).
The JavaScript looks like:
$(window).scroll(function(){
$("#side").css("top",Math.max(15,243-$(this).scrollTop()));
});
The HTML looks like:
<div class="menu">
<div id="side">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
</div>
The CSS looks like:
.menu {
right: 0;
position: absolute;
top: 243px;
width: 250px;
z-index: 5;
}
#side {
background: #ace;
position:fixed;
width: 250px;
}
JS Fiddle: https://jsfiddle.net/050dqcea/
Original solution (scrolling from top): Stopping fixed position scrolling at a certain point?

I think I understand now, the fiddle didn't have jQuery loaded so it just wasn't running as intended.
You can change how you want this to show or hide, that's up to you. I'd make a bit of a comment about how irritated your users might be that the menu disappears but that is up to you to decide. Alternatively you can use these triggers to "refix" your menu. The world is your oyster, etc.
I've used $("#side").offset().top here. The idea is to check when the menu's bottom has scrolled to the top of the footer. Then to bring it back we check if the vertical scroll is less than the offset of the top of the footer.
A fiddle for you: https://jsfiddle.net/5p90s06n/1/

anchorlink in navigation with slide-function jumps too far

The navigationlink "Leistungen" (marked black in below image) is linking to an anchor where you can find an carousel-slider. The submenu is doing the same + firing the function to slide to the relating carousel-slide.
Beglaubigungen
But out of some reason if you load the following site and try it, its jumping too far (following image): https://bm-translations.de/
The strange thing is, if you then click a 2nd time the same navigation link, it is jumping to the right anchor.
Why is this happening and how to solve this?

In your page, after clicking that menu link, it scrolls down to where that section is in the document.
It's scrolling down to a block element (I assume some JS script is smooth scrolling it to the ID):
<div class="row" id="leistungen"></div>
In your H2 element directly inside of that div, you have your heading with some padding on top:
<h2 style="text-align:center;font-size:24px;padding-top:30px">Leistungen Ihres Übersetzungsbüros</h2>
If you added that padding yourself, go ahead and increase that to 90px (or whatever amount you want).
Or else just add this to the bottom of your css file:
#leistungen > h2 { padding-top: 90px; }
The only alternative is to edit the JS that's creating the smooth scrolling feature.
EDIT: I'd even recommend streamlining your H2 padding in css, not on the page... each of your H2's have their own unique padding-top.
Before:
After:

Found a Solution:
<a onclick="document.getElementById("carousel-selector-1").click();location="https://bm-translations.de/#leistungen"">Beglaubigungen</a>

CSS - Navigation menu hover causing flickering effect

Please take a look at this page: http://www.staging.turtlerush.co.uk/sumas/
The Nav / Sub Nav CSS seems to be causing the hover menu to flicker in all cases EXCEPT when the page is fully scrolled to the top. So in other words, it works at first but as you scroll down the flickering starts.
I believe this is a problem with the nav ui element "clashing" with another but am struggling to fix.....
Probably a bit too much code to just paste in here but happy to if needed.
Any help?

Add this CSS code to .kopa-background:
.kopa-background {
pointer-events: none;
}
pointer events specify what to do when you click on the element.
This is a little explanation of this CSS property: https://css-tricks.com/almanac/properties/p/pointer-events/

Changing the distance an internal link scrolls down the page

Hi I've got a nav menu that changes to fixed once scrolled down the page a certain amount of pixels.
Because the menu is fixed, it overlays the top cutting out the header of that section.
I'm looking to affect how far the page moves when using the menu to move to a section on the page, so sort of negatively offset how far the page scrolls down to show all the menu aswell as section header if possible.
Thanks!

I've come across this issue and came up with the following solution:
<nav class="fixed">
About
...
</nav>
...
<div id="about" class="anchor-helper"></div>
<div class="container-i-actually-want-to-see>
<!-- your content goes here -->
</div>
In the CSS:
nav {
height: 50px;
}
.anchor-helper {
position: relative;
top: -50px; /* however tall your nav is, you want this to be negative that amount */
}
What I like about this solution is that it relies on CSS as much as possible and only uses javascript for smooth scrolling. If someone navigates to http://your-site.com/example-page#about, they will get to where you want them to be.

Sliding Header/NavBar

I have a header but I am stuck at 2 things.
How do I get it all positioned properly? What I want is it to be positioned as a header with a navbar at the bottom of it, then in that navbar I want a div that I can make slide around and I want x amount of tabs.
How would I make the div slide left/right using JavaScript/JQuery? Sorry if it doesn't make sense.
My code is:
<body>
<div class="header">
<div id="topHeader"> </div>
<div class="navBar">
//buttons/text here
<div id="slider"> </div>
</div>
</div>
</body>
I have tried using positioning (absolute/relative) but when I make the navBar relative it doesn't stay at the bottom but if I make both it and the slider absolute, the slider doesn't stay in the navBar. Is there any other way to accomplish it?

I am not able to understand how to make it work. However, here it goes.
The css for header would be:
.header {
display: block; // for that overall div..
}
Then you are having a top header, that would be more like a top header under which you want the nav bar. Ok for that you said you want it to be as header. Then just write it the way it is! And it will be used as a header, I mean just add some margins and paddings so that it has some distance from other objects.
#topHeader {
margin: 5px; // overall 5px pixel for all sides.
padding: 2px; // 2 pixel padding..
}
The nav bar, was the one with may buttons and texts that you will be using as hyperlinks to other pages. Right? So try using something like this:
<ul>
<li>First text</li>
<li>Second text</li>
<li>Third text</li>
</ul>
Now, show them all in a line. Because you wanted them in line, the list items will be shown in a line instead of being shown under each other as default. The x tabs will be the amount of the li used in the list, and it will show all the buttons or what ever you were trying to show. To do that the CSS is:
li {
display: inline;
}
To remove the bullet style, use this:
ul {
list-style: none;
}
This way the navbar will be shown in a line as other websites show.
Second question:
The sliders slide with the help of mouse, not jQuery (Just kidding). You can use scroll bars buddy, jQuery is used to scroll or slide, but that hides once slided. You will be able to see it but when it will scroll back it will hide, and go out of the page untill you slide it back again. You can just stick to the scroll bars to scroll or slide.
That's all!
jQuery slider:
From jQuery API if you check the slide() you will find out, that any event on any element would cause a slide (that will slide the element up and down) in some element.
Here would be an example:
$(document).ready(function () {
$("#slider").click(function () {
$(".navBar").slideToggle(1000); // the time consumed is 1 sec = 1000 milliseconds.
}
});
You can see, that a click on the element with id="slider" would slide the element with class="navBar" and the slide will consume the time of 1 second.
Advice or Suggestion:
I would like to advise you to first learn the basics about the codes that you will use. They are easily searchable via Google, Bing or any other search engine. Because if you will post questions that you know nothing about would cause downvotes for you. That's ridiculous I know. So please when you are going to use jquery and know nothing about it, please try to go to Google and write this search item jquery if nothing found then append tutorial to the search query and find it. Best tutorial would be found on the site of the developer. Like you can learn jQuery on jquery.com and JSON at json.org.