Develop Reference

Fixed menu with title div disappearing on scrolling

I wish to combine the scripts of this template (I'm revising)
https://codepen.io/lydiawawa/pen/gEPpwX
to carry the effect from this example:
https://codepen.io/jamesbarnett/pen/JwFuy
The javascript I need to revise is as of the following:
/* JavaScript from: http://jqueryfordesigners.com/fixed-
floating-elements/ */
$(function () {
var sidebar = $('.sidebar');
var top = sidebar.offset().top - parseFloat(sidebar.css('margin-top'));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
sidebar.addClass('fixed');
} else {
sidebar.removeClass('fixed');
}
});
});
Could anyone help me to revise the script to achieve the effects?
Thank you!

You've already set the position of nav as fixed by default which won't give you the desired result. You should set its position as static by default, and change the value after the document has reached a certain point by scrolling.
As I mentioned earlier, that script in the actual OP is doing the right job. The only thing I've done is to copy/paste that script to your example ( and some tiny CSS changes ).
check out this revised version at codePen

How to scroll div to bottom?

Now I have div with following properties:
.chat-history {
height: 70%;
overflow: auto;
}
How to scroll it to bottom using js?

window.scrollTo(0, document.getElementsByClassName('chat-history')[0].scrollHeight);
I think this will work as you needed. you have to write the class name of the div where you are showing the messages.

You can use the scrollTop function in Javascript
Example:
var obj = document.getElementById("Name of your div");
obj.scrollTop = obj.scrollHeight;
Working fiddle: https://jsfiddle.net/js1vyrxr/3/
If you want to use it with jQuery you can use something like this
$("#ScrollToThisDivID").scrollTop($("#ScrollToThisDivID")[0].scrollHeight);

You can use the javascript scrollTo function
window.scrollTo(0, document.body.scrollHeight);
Where 0 is the horizontal scoll and the second parameter is the vertical scroll.
For your example you should get the element and use that element instead of window, like this:
getElementsByClassName('chat-history')

Scroll a div vertically to a desired position using jQuery

This is a followup question for this:
Scrollpane on the bottom, css is hacky, javascript is hard
I ended up doing the scrolling in the same way explained in the accepted answer.
Now there is a request that one item is selected somehow (eg. as an url parameter or by some javascript calls) I should scroll the pane to the item with the corresponding ID in the scrollpane. Like a link to an anchor () would work!
I want to make a javascript call like this
function scrollTo(id) {
$('#middle').magicallyScrollThatItemWouldBeVisible(itemid);
}
But this is not in jQuery (or at least I don't know of it). So is there a way to make it?
I'll post a simple jsFiddle here:
http://jsfiddle.net/ruisoftware/U6QdQ/4/
Help me write that scrollTo function!
A .animate would be fine too.
UPDATE: If it was not clear I would like it to only align to the left or right side of the panel, it it was overflowed on that side (so the minimum possible amount of scrolling happens)

It's not jQuery, just JavaScript, and I've actually never used it all, so I'm not sure how you would have to mess with it to get it to work in this situation, but there is a scrollIntoView function:
yourElement.scrollIntoView();

Since the elements have a fixed width, you can count the number of elements by using .index() + 1, and animate to this value (after subtracting the container's width).
If you want the element to be centered, use - Math.round(middle.width()/100)*50.
Fiddle: http://jsfiddle.net/U6QdQ/17/
//This code should be run on load / DOMReady
(function($){ //Run on load / DOMReady
$.fn.magicScrollTo = function(){
var middle = $("#middle");
var currentScrollLeft = middle.scrollLeft();
var width = middle.width();
var newScrollLeft = this.offset().left + currentScrollLeft - middle.offset().left;
if(newScrollLeft >= currentScrollLeft && newScrollLeft <= currentScrollLeft + width - this.outerWidth()) return;
if(newScrollLeft > currentScrollLeft){ //If the element is at the right side
newScrollLeft = newScrollLeft - width + this.outerWidth();
}
middle.animate({
scrollLeft: newScrollLeft,
}, 'fast')
}
})(jQuery);
Usage:
//Select the 4rd element, and scroll to it (eq is zero-based):
$('.item').eq(3).magicScrollTo();

Something along these lines would be a good start:
http://jsfiddle.net/vHjJ4/
This will bring the target into the centre of the carousel. I think you will have to add in some extra checks to make sure that it didn't scroll to far, for example if you targeted the first or last element...unless this is built into the scroll function (it might be).

I'm not sure I understand your question exactly, but it sounds like you're asking how to scroll horizontally to the selected item in the bottom pane. If so, try something like this:
//get the position of the element relative to the parent ("middle")
var pos = $("#itemid").position();
if (pos){
$("#middle").scrollLeft(pos.left);
}
From here, you can use the width of middle to center the item if needed.

How can I detect if the page is at the top?

I want to make an event occur when the page scroll is at the top of the page.
Also I need an if statement for it.
I am a beginner with javascript so any help is appreciated.
I am looking for something like this:
if (at_the_top_of_the_page) {
do_the_event_here
}
I think this is the right struckture for it. But I don't know what is the right code. I know that it will be in javascript. But I really don't know how...

Elements have a scrollTop element that can be read or set. Make sure you're reading the correct element's scrollTop, the one that you're scrolling.
ex:
var div = document.getElementById('scrollable');
if(div.scrollTop==0){
//Top of element
}

Get the position of the scrollbar using this
function Getpostion(){
var vscroll = document.body.scrollTop;
alert(vscroll);
}
if vscroll is zero do your job. More details

document.body.scrollTop === 0;

To do the easy way:
Include jquery library in your HTML document.
And to check if the user is on top of the page
var scrollPosition = $("body, html").scrollTop()
if (scrollPosition == 0){
// top of the page
}

You would have to use javascript. Get to learn a little bit of jQuery.

(jQuery) Scroll event.. I want to scroll the document to the point specified if the user scroll the page

I want to implement a scroll function.. So the default of scroll is disabled. And if the user use the scroll button, I want it to be set to the point I want.. How can I implement this function? window.scrollTop is not working.. I tried a lot of different methods but all were not working..
$(window).scroll(function () {
$(body).scrollTop = 3000px;
})

The scrollTop property only accepts an integer (not pixels). Omit the px and it should be fine.
$(window).scroll(function() {
$('body').get(0).scrollTop = 3000; // note that this does only work if body has overflow
// if it hasn't, use window instead
});

There is a plugin for JQuery called ScrollTo that might do exactly what you need.
Check it out here: http://plugins.jquery.com/project/ScrollTo