I have scrolling a menu on my website http://www.whirlware.biz, it works fine at all but have a bug in submenus (company and services), submenu appears strange way when page is scrolled. I think I need fixed position for submenu, but when I try to make it I had awful results.
My code: (or you can inspect my website)
stickymenu.js
$( document ).ready(function() {
var left = document.getElementById("zt-mainmenu");
stop = (left.offsetTop - 60);
window.onscroll = function (e) {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
if (scrollTop >= stop) {
left.className = 'fixed_m';
} else {
left.className = '';
}
}
});
I tried to add this css but there was no result that I expected:
div.submenu-wrap {
position:fixed !important;
top:0px !important;
left:0px !important;
}
I can`t provide whole css code because style file is big, but if you expect site I think you can find right answer.
Can somebody help me with this? Thanks.
You have a top property that the js plugin is inserting. Either edit the plugin to remove the top property inline, or use this bit of CSS on an existing selector you have:
div.menusys_mega .menusub_mega {
position: absolute;
opacity: 0;
top: inherit !important;
}
It's not ideal because of the !important, but at least you will see what happens when you cancel out the top property.
Related
let's get straight to the point:
My code looks like the following:
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
</div>
</div>
</div>
And my css:
#keep_up {
position: fixed;
width: 13%;
}
#thread_menu{
height: 80vh;
width: 100%;
float: left;
position: relative;
}
Now i use this for a forum. and this is basically to show the active and new threads on the side of the screen.
However. When watching a thread, the header disappears (Wich makes sense because we are scrolling down).
but i want the thread menu to stay on my side (So that it is always visible). In this case that is happening because my keep_up div has position: fixed. But i only see half of the thread menu becuase it is too long and won't scroll up.
My question:
I want the thread menu to scroll up, untill it reaches the top of my window. From then on i want it to stay there.
How do i do this?
I saw a few examples but none of them worked for me.
EDIT: Code i tried:
<script src="jquery.min.js">
$(window).scroll(function () {
var margin = null;
$(window).on("scroll", function () {
var scrollHeight = $(document).height(),
scrollTop = $(window).scrollTop(),
offsetBottom = 110, // Offset depending on the height of the footer
offsetTop = 100, // Offset depending on the height of the header
positionTop = $(".keep_up").offset().top,
affix;
if (margin != null && (scrollTop + margin <= positionTop)) {
// The sidebar has reached the bottom and is still on the bottom
affix = false;
} else if (positionTop + $(".keep_up").height() >= scrollHeight - offsetBottom) {
// The sidebar has reached the bottom
affix = 'bottom';
} else if (scrollTop <= offsetTop) {
// The sidebar has reached the top
affix = 'top';
} else {
// The sidebar is midway
affix = false;
}
// If the sidebar hasnot changed his state, return;
if ($(".keep_up").hasClass('at' + (affix ? '-' + affix : ''))) return;
if (affix == 'bottom') {
margin = positionTop - scrollTop;
} else {
margin = null;
}
// If the related class is added to the div
$(".keep_up").removeClass('at at-top at-bottom').addClass('at' + (affix ? '-' + affix : ''))
});
});
</script>
And the CSS:
.keep_up{
/*position: fixed;*/
width: 13%;
}
.keep_up.at {
top: 1px;
position: fixed;
}
.keep_up.at-top{
}
.keep_up.at-bottom {
top: 438px;
position: absolute;
}
modify this on HTML:
<div id="prevent"></div>
<div id="keep_up" data-spy="affix" data-offset-top="200">
Add this CSS:
.affix{position: fixed !important; top:0px; z-index:999;}
.affixpatch{margin-top:100px !important;}
this will fix the div when you scroll down 200px. Change data-offset-top value to reach it on different break point.
.affixpatch is a class that will be loaded with next jquery function. it prevents to hide content behind top fixed div. Change margin-top to another value if this don't solves the "hide content" problem that always generate affixing divs.
<script>
$(function() {
//caches a jQuery object containing the header element
var header = $(".affix");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$('#prevent').addClass("affixpatch");
} else {
$('#prevent').removeClass("affixpatch");
}
});
});
</script>
Hope it helps. If not, you may have some class that rewrite or impede the correct function of this affix.
I've tested this hundreds of times, usually to fix navbars.
SCROLL:
Using overflow to scroll content:
#keep_up{
max-height:400px;
width: auto;
overflow:auto;}
This will scroll the content inside #keep_up div (or use it in another one)
NOTE: you must declare a fixed max height for this div. Set max-width only if you need.
You can use %, em, rem... no need to be px for fix the max witdth. (to get a responsive effect, use responsive measurements)
If I understand your scenario correctly, the way to do this might be to use jQuery (or native JS, but you've tagged jQuery so I'm assuming that's in play).
There's a plugin that handles this kind of thing: http://leafo.net/sticky-kit/
I'd suggest you look at the plugin source code to see how it works - an event handler function on $(window).scroll() which then toggles classes on your #thread_menu to fix it in place. To keep your code lightweight, you probably don't need everything the plugin provides.
So I'm putting a website together which will have a few css3 animations triggered on the scroll event. About halfway through writing the scrolling animations, I'm noticing a lot of blinking on the page's header and other position:fixed elements.
Is there something I can do to minimize this blinking? (Ideally without jQuery)
Well, it looks like this issue is probably isolated to chrome and the speed at which fixed positioned elements render when CSS animations are firing off during scroll.
I wanted to see if this little trick would hardware-accelerate elements that weren't actually the subject of a CSS animation in chrome. Turns out it did. :)
Here's the solution:
.topbar
{
-webkit-transform: translate3d(0,0,0);
}
The transform: translate3d(0,0,0) did not fix the issue in my case for e.g. BS navbar. But instead I stumbled over a different solution which fixed the problem for AOS, Animate.css and also WOW.js. In my case all elements with position: fixed had erratic behaviour when scrolling on mobile (touch devices) through the site.
An approach I found here and here did completely solve the existing problems. Add overflow-x: hidden; to your body a/o section elements that contain the animation.
body { overflow-x: hidden; }
or
section { overflow-x: hidden; } //might be a different container element
Finally my BS navbar is no longer affected by any animations.
There will be somethingg wrong with your javascript code. I faced the same problem
for eg :
This was the code with blinking div :
window.onscroll = function () {
var sticky = document.getElementById("sticky");
var value = sticky.offsetTop;
if(window.pageYOffset > value){
sticky.classList.add("sticky");
console.log("sticky");
}else{
sticky.classList.remove("sticky");
console.log("nonsticky");
}
}
The problem was that i declared variable in on scroll function
The fix :
var sticky = document.getElementById("sticky");
var value = sticky.offsetTop;
window.onscroll = function () {
if(window.pageYOffset > value){
sticky.classList.add("sticky");
console.log("sticky");
}else{
sticky.classList.remove("sticky");
console.log("nonsticky");
}
}
I fixed this by changing the document.body.scrollTop and document.documentElement.scrollTop to > 1 instead of > 50 or > 25:
window.onscroll = function () {
// Change the scrollTop conditions here.
if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
yourTopBarInnerElement.style.display = "none";
} else {
yourTopBarInnerElement.style.display = "block";
};
};
It works for me at least.
Use position: sticky; instead of position: fixed;
**Blinking Fixed Header issue I am facing only in Firebox. Animation property not supported by Firebox?**
*In below code i am applying tranform property to all column who has freeze_vertical class*
var fixed_vertical_elts = document.getElementsByClassName(table_class + " freeze_vertical");
for (i = 0; i < fixed_vertical_elts.length; i++) {
fixed_vertical_elts[i].style.webkitTransform = translate_y;
fixed_vertical_elts[i].style.transform = translate_y;
fixed_vertical_elts[i].style.background = "#fff";
}
*but one thing I observed once you open a debug mode, from that moment to until reload,fixed header not blink.*
Thanks in adavance
I really like the floating panel on the left side of the following site:
http://envato.com/
I have no idea what its called, but I like how when you click on the search button, it expands to a search page, you click on another icon, and it expands with what appears like its own page.
How do I accomplish this? Is there some tutorial out there using html5, JavaScript or jQuery?
NOTE: All the answers so far only cover the floating bar, but not the clicking on a link on that floating bar to show a window expanded to the right.
<div id="float"></div>
#float{
position:fixed;
top:50px;
left:0;
}
Check working example at http://jsfiddle.net/TVwAv/
done using css,
HTML
<div id="floating_sidebar">
whatever you want to put here
</div>
CSS
#floating_sidebar {
position:fixed;
left: 0;
top: 100px; /* change to adjust height from the top of the page */
}
I am using this for a "floating (sticky) menu". What I have added is:
1. to avoid my 'footer' always being "scrolled" down in case the sidemenu is a little high, I only do the scrolling if necessary, i.e -
when the content is higher than the sidebar.
2. I found the animate effect a little "jumpy" to my taste, so I just changed the css through jquery. of-course you put a 0 in the animate time, but the animation still occurs, so it's cleaner and faster to use the css.
3. 100 is the height of my header. you can assume it to be the "threshold" of when to do the scrolling.
$(window).scroll(function(){
if ($('#sidebar').height() < $('#content').height())
{
if ($(this).scrollTop() > 90)
$('#sidebar').css({"margin-top": ($(this).scrollTop()) - 100 });
//$('#sidebar').animate({"marginTop": ($(this).scrollTop()) - 100 }, 0);
else
$('#sidebar').css({"margin-top": ($(this).scrollTop()) });
//$('#sidebar').animate({"marginTop": ($(this).scrollTop()) }, 0);
}
});`
you can use this ..
your html div is here
<div id="scrolling_div">Your text here</div>
And you javascript function is here
$(window).scroll(function(){
$('#scrolling_div').stop().animate({"marginTop": ($(this).scrollTop()) +10+ "px"}, "slow"});
});
You can also use the css for this
#scrolling_div {
position:absolute;
left: 0;
top: 100px;
}
I have not tested it but hopefully its worked.
I know this looks quite a big piece of code, however this function just works by specifying three simple options; your floater "top", your "target" (floater) and "reference" element to set the boundaries, it also takes care of the top and bottom position automatically, no css involved.
function scrollFloater(marginTop, reference, target, fixWhidth = false){
var processScroll = function(){
var from = reference.offset().top - marginTop;
var to = reference.offset().top + reference.outerHeight() + marginTop - target.outerHeight();
var scrollTop = $(this).scrollTop();
var bottom = to - reference.offset().top + marginTop;
if( fixWhidth )
target.css('width', target.width());
if( scrollTop > from && scrollTop < to )
target.css('position', 'fixed').css('top',marginTop);
else if( scrollTop >= to )
target.css('position', 'absolute').css('top', bottom);
else
target.css('position', '').css('top',marginTop);
}
$(window).scroll(function(){ processScroll(); });
processScroll();
}
And this is how you would use it:
$(function() {
scrollFloater(41, $('.box.auth.register'), $('.plans-floater'), true);
});
I hope this helps someone.
how can i build fixed menu like gmail menu. i have tried css, but the div stays in middle, it doesnt come up like the gmail menu does on scroll.
open in large image
i have tried using css property, following is some example code (not real code):
.menu {
position:fixed;
height: 36px;
background-color:#fff;
}
You need to use javascript to check the scrollTop and set the position of your menu to fixed if if the scrollTop is more than the height of your header.
function getScrollTop() {
if(typeof pageYOffset!= 'undefined') {
//most browsers
return pageYOffset;
}
else {
var b = document.body; //IE 'quirks'
var d = document.documentElement; //IE with doctype
d = (d.clientHeight) ? d : b;
return d.scrollTop;
}
}
function onScroll() {
var menu = document.getElementById('divMyMenu');
var headerAndNavHeight = document.getElementById('divHeader').clientHeight
+ document.getElementById('tsMain').clientHeight;
if (getScrollTop() < headerAndNavHeight) {
menu.style.top = headerAndNavHeight + 'px';
menu.style.position = 'absolute';
}
else {
menu.style.top = '0px';
menu.style.position = 'fixed';
}
}
A good and easy to use jQuery Plugin for this is Waypoints
Here you can see a working example:
http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Position fixed alone is not enough to achieve this effect. Also, position:fixed does not work in IE7 or below, so you'll probably want to have fallback.
You need to use javascript (jQuery makes it easy) to dynamically change the position of the element based upon how far scrolled down the page you are.
Look into .scrollTop()
http://api.jquery.com/scrollTop/
var scrollTop = $(window).scrollTop();
May be this is what you are looking for
http://blog.geotitles.com/2011/10/creating-top-fixed-menu-bar-with-css3-buttons-found-in-gmail/
Here is a very simple trick to implement your requirement explained with example and a link to download.
http://itswadesh.wordpress.com/2012/02/24/google-like-top-bar-with-drop-down-menu-using-html-css-and-jquery/
how to have a div that always stay on the screen? Lets say i have a div at the left hand site. When the browser is scroll to the bottom, the div will remain there ONLY when its' top reaches the top edge of browser screen so that it will not be hidden. I am using jquery too.
Thank you.
here is a Good ScreenCast By RemySharp Regarding this Issue
http://jqueryfordesigners.com/fixed-floating-elements/
Demo Page :
http://static.jqueryfordesigners.com/demo/fixedfloat.html
You need to invoke .scrollTop() on the window and compare that with the offset top value from that DIV.
$(window).bind('scroll', function(e){
var $div = $('.top').
sTop = $(window).scrollTop();
if($div.offset().top <= sTop)
$div.css('top', sTop);
else
$div.css('top', '100px');
});
Whereas in this example, .top is the element which should stay at top.
Example: http://www.jsfiddle.net/2C6fB/8/
If you want it to always stay in thesame place, you can use the css property position: fixed; else you can use a combination of $(window).scroll() and .scrollTop(); to detect where your div is in relation to the screen and apply the right positioning.
/* PlugTrade.com - Sticky Top jQuery Plugin */
jQuery.fn.sticky_top = function () {
/* check for our hidden div.. create it if it doesn't exist */
if (!this.find("#sticky_top").length > 0)
this.append("<div id='sticky_top' style='display:none'>"+this.css('top')+"</div>");
var thisdiv = this;
$(window).bind('scroll', function(e){
var initval = thisdiv.find("#sticky_top").text();
var wintop = $(window).scrollTop();
var boxtop = initval.replace(/px/i, "");
if(wintop >= boxtop)
{
if ( $.browser.msie )
{
thisdiv.css('top', wintop+'px');
} else {
thisdiv.css('position', 'fixed');
thisdiv.css('top', '0');
}
// console.log(boxtop+':'+wintop);
/* thisdiv.css('top', wintop+'px'); */
}
else
{
thisdiv.css('position', 'absolute');
thisdiv.css('top', initval);
}
});
}
You can use like this:
$('#div1').sticky_top();
Keep your div position: fixed;