We Keep Coding

javascript issue with fixed position side menu

I'm building a website with a sidebar that, once the user scrolls past a certain point it becomes fixed on the site. This code works fine.
The issue that I am coming into is that the sidebar is overlapping the footer when the user scrolls to the bottom of the page. I wrote code to detect when the bottom of the sidebar hits the same position as it's containing element - when that happens I am taking the position of the bottom of the containing element and subtract the height of the sidebar element and using that number to give the sidebar it's new "top" (while also changing the position to "absolute").
This is where I am running into the issue - once the sidebar is overtop of the footer as the user scrolls the code that is getting called alternates between the normal "fixed" position code and the "absolute" positioned code giving it this flickering effect.
For the life of me I can't figure out why the "fixed" code keeps getting called.
Here is the code:
( function( $ ) {
var sidebar_pos = $('#secondary')[0].getBoundingClientRect();
var pos_top = sidebar_pos.top + window.scrollY; //need this to get the pos of TOP in the browser - NOT the viewport
var main_pos = $('.main-content')[0].getBoundingClientRect();
var main_bottom = main_pos.bottom + window.scrollY;
var stop_pos;
var i = 0;
$(window).scroll(function(event){
var scroll = $(window).scrollTop();
var produce_pos = $('.produce')[0].getBoundingClientRect();
var pos_bottom = produce_pos.bottom + window.scrollY;
//console.log("scroll "+scroll);
//console.log("top " + pos_top);
console.log(main_bottom);
console.log('bottom ' + pos_bottom);
if( scroll >= pos_top){
if ( pos_bottom >= main_bottom ){
//if the sidebar would end up overlapping the footer
if(i == 0){
//only need to set this once, not on every scroll
stop_pos = main_bottom - $('#secondary').height() ;
}
$('#secondary').removeClass('hover').css({
position: 'absolute',
margin:0,
left: sidebar_pos.left,
top: stop_pos
});
i++;
} else {
$('#secondary').addClass('hover').css({
position: 'fixed',
left: sidebar_pos.left,
marginTop: '1.5em',
top: 20
});
setTimeout(() => {
$('*[data-widget="comet"]').addClass('active');
}, 5000);
setTimeout(() => {
$('*[data-widget="produce"]').addClass('active');
}, 7000);
}
} else if( scroll < pos_top && $('#secondary').hasClass('hover') ){ //if user scrolls up past original pos of sidebar, remove effects
$('#secondary').removeClass('hover').css({
position: 'relative',
left: 'auto',
top: 'auto'
});
i = 0;
}
});
}( jQuery ) );
I also have a codepen of the script in action.
https://codepen.io/antlaur00/pen/ExyrgYR
Any help is much appreciated! Thanks!

Well its pretty simple, just add Z-index property to your footer CSS, that way it will always overlap your sidebar .
You can refer to this article regarding the z-index property
https://www.w3schools.com/cssref/pr_pos_z-index.asp

turn.js display option based on window width

i am trying to make a flipbook with turn.js which is awesome.
the only problem i have is that i am trying to make it so in mobies it is single page display and in desktops double page display.
it does have the option to choose when creating the flipbook in javascript
display: 'single' or display: 'double'
i managed to achive changing that when you resize the window but with the onresize jwuery event but that makes it so it triggers only when you resize the window but if you dont it is always double page...so when the browser renders the page for mobile it is as defaul double page and not single
let me post my code here
// Create the flipbook
flipbook.turn({
// Magazine width
width: 922,
// Magazine height
height: 600,
// Duration in millisecond
duration: 1000,
// Enables gradients
gradients: true,
// Auto center this flipbook
autoCenter: true,
// Elevation from the edge of the flipbook when turning a page
elevation: 50,
// The number of pages
pages: 12,
// Events
when: {
turning: function(event, page, view) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');
// Update the current URI
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
},
turned: function(event, page, view) {
disableControls(page);
$(this).turn('center');
$('#slider').slider('value', getViewNumber($(this), page));
if (page==1) {
$(this).turn('peel', 'br');
}
},
missing: function (event, pages) {
// Add pages that aren't in the magazine
for (var i = 0; i < pages.length; i++)
addPage(pages[i], $(this));
}
}
});
//change from single to double page
$(window).resize(function(){
var win = $(this); //this = window
if (win.width() >= 820) { flipbook.turn('display','double');}
else {
flipbook.turn('display','single');
}
});
i hope someone can help me fix this

To make the flipbook responsive for mobile, you can add the following code, which checks if the user agent of the navigator is mobile or not.
function checkMobile() {
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
}
And then use this in the resize of the window function.
if (!checkMobile()) { // not mobile
$('.flipbook').turn('display', 'double');
}
else {
$('.flipbook').turn('display', 'single');
}
You can use the above snippet after you have initialized the flipbook, to dynamically set the display (double, single) of the flipbook.

so hello everyone again, i managed to figure this out..
i changed the last code part from this
$(window).resize(function(){
var win = $(this); //this = window
if (win.width() >= 820) { flipbook.turn('display','double');}
else {
flipbook.turn('display','single');
}
});
to that
$(window).width(function(){
var win = $(this); //this = window
if (win.width() >= 820) { flipbook.turn('display','double');}
else {
flipbook.turn('display','single');
}
});
$(window).resize(function(){
var win = $(this); //this = window
if (win.width() >= 820) { flipbook.turn('display','double');}
else {
flipbook.turn('display','single');
}
});
it works fine both when you refresh the page and when you resize the window. I don't know if this the right way to do it but it seems to work perfectly fine

For mobile screens you have to change the screen width
here is tested and working code
if(window.innerWidth<768 && window.innerWidth >= 320) {
$('#flipbook').turn({
width:430,
height:650,
elevation:50,
inclination:50,
display: 'single',
autocenter:true,
acceleration: true,
gradients:true,
zoom:2,// you can change it as you desire
duration:50,
});
}

Here is what works for me on the mobile screen:
$('#flipbook').turn({
display: 'single',
acceleration: true,
gradients: true,
elevation:50,
when: {
turned: function(e, page) {
console.log('Current view: ', $(this).turn('view'));
}
}
});

scrollTop suddenly not working for sticky menu

I had this working with no problems for the entire build of the site. Then, the day I was supposed to launch, the sticky menu stopped working right. The menu is supposed to start at the bottom, scroll to the top, then stick (position: fixed).
Now, it scrolls about 10px and then jumps to the top. Why is the scrollTop distance not calculating correctly?
Live site at [site no longer exists]
Here's the code for the sticky menu. I'm also using JS to set min-height of divs to window height, but haven't included that code here.
$(function(){
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'});
$('#block-bcf53bf14093931c').css({display: 'block'});
} else {
$('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'});
$('#block-bcf53bf14093931c').css({display: 'none'});
}
});
});
Thanks in advance for any help! I'm not a JS or jQuery expert yet, so any suggestions for cleaning things up would be appreciated.
NOTE: The site is built on WordPress, so no-conflict mode is in effect.

I think you are initialising the sticky menu function before you set the min-height of $('big-div').
On page load, the menu starts at 54px from the top, and so when you store the offset().top value as stickyRibbonTop, it is stored at 54px. Then on your scroll event you are comparing against this.
Try setting the min-height of the divs first in your code, then run this same script afterwards. The value of stickyRibbonTop should then be correct.
Bear in mind that you will need to reset stickyRibbonTop every time the window.height() is updated, so you should probably make this sticky menu function a named function and call it at the end of the wrapper_height function. something like this:
function stickyNav() {
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).unbind('scroll', scrollEvent);
$(window).on('scroll', stickyRibbonTop, scrollEvent);
};
function scrollEvent(event) {
var stickyRibbonTop = event.data;
if ($(window).scrollTop() > stickyRibbonTop) {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' });
$('#block-bcf53bf14093931c').css({ display: 'block' });
}
else {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' });
$('#block-bcf53bf14093931c').css({ display: 'none' });
}
};
function wrapper_height() {
var height = $(window).height();
var wrapperheight = height - 75;
wrapperheight = parseInt(wrapperheight) + 'px';
$(".bigDiv").css('min-height', wrapperheight);
$("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight);
stickyNav();
}
$(function () {
wrapper_height();
$(window).bind('resize', wrapper_height);
});

Bootstrap Accordion - change the position of top panel when collapse

I'm using bootstrap accordion plugin and my question is:
How can we change the position of the top panel when opened and return to its first position when closed. Please look at the photo:
Here is the pen,
and thanks in advance,

I would do something like this using jQuery:
var original = $('#accordion').position().top;
$('.accordion-toggle').click(function(){
var parent = $(this).data('parent');
var body = $(this).attr('href');
if($(body).is(":visible")) {
$(parent).animate({top: original}, 350);
}
else {
$(body).css({
position: 'absolute',
visibility: 'hidden',
display: 'block',
height: 'auto'
});
var offset = original - ($(body).height() / 2);
$(body).removeAttr('style');
$(parent).animate({top: offset}, 350);
}
});
Hope is helps or puts you in the right direction.

Position fixed related parent container

I need solution to emulate fixed position, but relative parent div, not whole viewport. JS solutions are laggy. I need fixed related parent container, because if window has small height, div with fixed position enters into footer zone.
Example

Another approach re your update.
Try giving the fixed div z-index: 10;
And the footer div position: relative; z-index: 11
That should make the footer overlap the fixed div.

then it's not an issue of position:fixed, maybe you could just define a min-height to your body (or on the main wrapper if any) to avoid the short page problem

I have combined css and js:
$(document).ready(function () {
var $sidebar = $(".register-box"),
$window = $(window),
$content = $("#content"),
docHeight = $(document).height();
var entered = false;
$window.scroll(function () {
if ($window.height() < 795 && docHeight - $window.scrollTop() < 785) {
entered = true;
var pos = $sidebar.offset();
$sidebar.css('position', 'absolute').css('top', ($content.height() - ($sidebar.height() + 40)) + 'px');
}
else {
if (entered) {
entered = false;
$sidebar.css({
top: "",
left: "",
position: "fixed"
});
}
}
});
});
Code is not final, and numbers are hard coded, but it works, smooth enough.