Container collaps on addClass - javascript

I'm building my personal portfolio and my .main-nav collapses with my container when I .addClass on jQuery. Here is how it looks:
.main-nav {
width: 100%;
height: 5em;
background: #595959;
box-shadow: 2px 2px 2px rgba(0,0,0, .3);
justify-content: center;
align-items: center;
z-index: 1;
}
.sticky {
position: fixed;
top: 0;
}
Jquery:
var yourNavigation = $(".main-nav");
stickyNav = "sticky";
myHeader = $('.main-header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > myHeader ) {
yourNavigation.addClass(stickyNav);
} else {
yourNavigation.removeClass(stickyNav);
}
});
So when I scroll below the header, as the .main-nav becomes fixed, the container under it occupies the space left on top, which makes it collapse.
Any suggestions? Any help is welcome!
Thanks!

If I understand you correctly, your navbar is driven into left corner when it's fixed.
The solution is very simple. Add this to .sticky styles:
.sticky {
...
right: 0;
left: 0;
...
}
If it won't work for you, please, post your html so we can try it (better, create a JS Fiddle), clarify your question and provide as with a screenshot showing what's wrong.

Related

how to change css when user scrolls to bottom of page

i currently have a div that appears fixed after scrolling. i want that div to to remain visible but not fixed once the user reaches the bottom of the page..
this is what i have so far:
var topOfOthDiv = 800; //set manually for example
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#ctawrapper.ctaFloat").addClass('show'); //reached the desired point -- show div
} else {
$("#ctawrapper.ctaFloat").removeClass('show'); //reached the desired point -- hide div
}
});
#ctawrapper.ctaFloat {
position: fixed;
bottom: 0;
height: auto;
max-height: 100px;
width: 90%;
display: none;
}
#ctawrapper.show {
background: #fff;
width: 100%;
z-index: 999;
left: 0px;
padding: 15px;
border: 1px solid #ddd;
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctawrapper" class="clearfix ctaFloat">
<h4>sponsored topics</h4>
</div>
everything i have tried to do to add a new class or change the css once it reaches the footer have failed. can i get some help please?

Sticky div only for mobile phone / cellphones

On the top I have two divisions, and the second one is supposed to get fixed after the user has scrolled pass it but only on cellphone.
Take a look at this for example : https://jsfiddle.net/livibetter/HV9HM/
This is exactly what I am trying to do but I want this to happen only on cellphone devices. On desktop the divisions will behave differently. On desktop top two divisions are fixed and therefore that isn't a problem and it is working properly.
On cellphone I have removed fixed from division one and 2 and when the user passes by division 2 I'd like to make it fixed and work like shown in the example given above.
Sample Codes from Fiddle
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
You can always use the media query in the CSS side to achieve this such as my example below:
#media screen and (max-width: 430px)
{
.cssEntry {
background: pink;
}
}
NOTE: You can tinker with the mobile widths but generally 430px is more than enough.

Scroll to div then fix it to top of page

I currently have a div (#sticky) within the right bar of my page and would like to fix it to the top of the page once I scroll to it. The div (#sticky) I want fixed to the top of the page sits about 1000px down the page.
HTML:
<div id="right-bar">
<div id="sticky-anchor"></div>
<div id="sticky"></div>
</div>
CSS:
#right-bar {
display: inline-block;
float: left;
width: 336px;
height: 10000px;
margin-left: 15px;
}
#sticky {
display: block;
width: 334px;
height: 600px;
background-color: white;
border: 1px solid #e5e5e5;
margin-top: 15px;
}
#sticky .stick {
position: fixed;
top: 0;
z-index: 10000;
}
JAVASCRIPT: (within head tags)
<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
Not quite sure what I am doing wrong, but once I scroll to the div, I bypass it without it getting stuck to the top of the page.
Any and all help is appreciated!
You have a CSS typo, instead of #sticky .stick use #sticky.stick (same thing but without a space).

Show/hide in a jQuery sticky menu (positioned in the middle)

I have a few problems with trying to make a sticky menu that shows/hides with a click button, which is why I'm thinking about getting rid off the whole show/hide option completely and probably rewriting it from scratch in the future.
I can identify 2 major problems:
How to make the show/hide button move along with the sticky menu but to make it in such a way so that it does not disappear with it when the hide button is clicked?
I tried quite a few options on how to animate the menu so that it toggles from right to left (and vice versa) but somehow each time there was something wrong (either with my code or the option I found). How do I do it properly? If I manage to animate it so that 90% of the div hides there will still be place for a hide/show button (and this will also solve problem #1).
Here is my code so far:
http://jsfiddle.net/ohkegetn/
(edit: correct jsfiddle link added)
HTML:
<div class="menuWrapper">
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<div id="toggle">Show/Hide</div>
CSS:
body {
background: black;
font-family: Open Sans;
font-size: 180%;
line-height: 200%;
height: 100%;
color: white;
}
a{
color: white;
text-decoration: none;
}
.menuWrapper {
position: absolute;
top: 225px;
text-align: center;
width: 300px;
left: 0;
}
#toggle {
top: 450px;
position: absolute;
}
#menu {
width: 150px;
background: #0E586D;
color: white;
position: relative;
top: 0;
}
li {
color: #e5e5e5;
transition: 1s;
padding: 0 0 0 10px;
text-align: left;
display: block;
}
#menu ul a li:hover {
transition: 0.3s;
color: white;
background-color: #0f6a84;
}
p {margin: 200px}
JS/jQuery:
// Toggle - show/hide
$(document).ready(function(){
$("#toggle").click(function(){
$(".menuWrapper").fadeToggle("slide");
});
});
// Sticky Menu
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#menu').position();
sticky_offset = original_position_offset.top;
$('#menu').css('position', 'relative');
});
$(window).scroll(function () {
var sticky_height = $('#menu').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll) > sticky_offset) {
$('#menu').css('position', 'fixed');
}
if((where_scroll) < (sticky_offset + sticky_height)) {
$('#menu').css('position', 'relative');
}
});
Final notes:
The html/css code is probably a bit of a mess, sorry for that but its just a test version. They are not that relevant anyway. The jQuery part is.
Also I would like to stick to Javascript/jQuery without plugins if possible.
Big thanks for any help!
I solve your problem
but this solution is as you think or not i donot know
see this link
$(".scroll").mouseover(function() {
var pos = $(this).offset();
var width = $(this).outerWidth();
$("#toggle").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left+width) + "px"
})
});

border-radius + overflow:hidden when animating with jQuery

Check this jsFiddle.
The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.
Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.
Also is there a better solution for this?
Modified your fiddle a little bit. Here is the link
Modifications:
Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css
Check if this works for you.
position: absolute and overflow: hidden don't appear to be playing nicely with display: table/table-cell. Removing the table stuff you had in there to vertically center the text fixes the problem. In Firefox, at least.
I think it's the browser thing...
This is the CSS3 version...
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
transition: height 1s;
}
.innerContainer:hover > .progressBar {
height: 300px;
}
http://jsfiddle.net/ZyhgT/2/
It no longer flashing 'cause browser handle the job (not js loop animation...). But still it shows the edge on animation finish!!! This could be the browser things... Could be a bug...
This is not related to jQuery or any javascript. In fact, if you delete all your javascript and manipulate the height of your .progressBar using css on li:hover, you will notice the bug anyway.
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
As a workaround try adding an imperceptible css transform to the mask element:
.outerContainer {
-webkit-transform: rotate(0.000001deg);
}
You just need to change your .outerContainer class and it works just fine!
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Put the level class inside the outerContainer div and style the span inside the level class to be relatively positioned. In the JavaScript, to calculate the level, divide by 10 instead of 100 for the perfect circular hover effect.
Here is a fiddle.
HTML
<div class="outerContainer">
<div class="innerContainer">
<p>Circle 3</p>
<span class="progressBar"></span>
</div>
<div class="level"><span>75</span>
</div>
</div>
CSS
body {
background: blue;
}
#circles {
text-align: center;
margin: 100px 0;
}
li {
display: inline-block;
margin: 0 10px;
position: relative;
}
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
color: #000;
width: 96px;
position: relative;
z-index: 2;
}
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
}
.level span{
position:relative;
}
JS
$(function() {
$("#circles li").hover(function(){
var thisElement = $(this);
var level = $(this).find(".level").text();
var elementHeight = $(this).find(".outerContainer").height();
level = (level/10)*elementHeight;
$(thisElement).find(".progressBar").stop().animate({
height: level
}, 300);
}, function() {
var thisElement = $(this);
$(".progressBar").stop().animate({
height: 0
}, 300);
});
});
display: table doesn't work that good with CSS positioning;
you should avoid using that, and find some other way to vertically center your labels.
If your circles have a known height, like your code seems to indicate (height:96px ecc), then just use a fixed top position for an absolutely positioned <p> element:
http://jsfiddle.net/ZyhgT/5/
Note that you don't even need jQuery for this, it is all achievable with just CSS3 (unless you are targeting old browsers)

Categories