Trying to implement my own social share icons. I've got everything working the way I'd like but I've run into a slight issue. I want to make the icons scroll alongside the content with the user so I use jQuery by doing this:
HTML
<div id='blogpost'>
<div id='social'>
<ul class='fa-ul'>
<li class='fb'><i class='fa fa-facebook'></i></li>
<li class='twitter'><i class='fa fa-twitter'></i></li>
<li class='google'><i class='fa fa-google'></i></li>
<li class='linkedin'><i class='fa fa-linkedin'></i></li>
</ul>
</div>
<h2>Lorem Ipsum</h2>
<p>My text...</p>
</div>
JS
$(document).ready(function(){
var stickyTop = $('#social').offset().top; //Get top of the social div
$(window).scroll(function(){ //Scroll event - executed each time user scrolls
var windowTop = $(window).scrollTop();
if(stickyTop < windowTop){
console.log('sticky');
$('#social').addClass('stick');
}else{
console.log('normal');
$('#social').removeClass('stick');
}
});
});
The #social div has following CSS which displays it slightly to the left of the blog post. This is perfect.
div#social {
position: absolute;
left: -80px;
top: 45px;
}
When I scroll I then add the .stick class to the #social and the position is updated from absolute to fixed. This is causing inconsistency on mobile devices. When I resize the screen sometimes the icons appear behind the post rather than just slightly to the left. Is there a way I can update my CSS to ensure the icons are always just slightly to the left ??
You can see my JSFiddle here: https://jsfiddle.net/c7jwtcfr/4/
Thank you.
To solve your problem, changing the left value in .stick is sufficient:
.stick{
left: 18px !important;
position: fixed !important;
top: 55px !important;
}
Related
I have the following code to move a toolbar that is below a header to stick to the top of the viewport when scrolling down. The problem is when the height of the content is slightly higher than the viewport. When you attempt to scroll to the bottom, it bounces back up to just above the end of the content with a weird visual glitch. It probably has to do with the fact that when the 'sticky' class is added, it increases the height of the page, but I'm not sure how to remedy it.
Javascript/JQuery:
var enableSticky = () => {
let headerHeight = $('.toolbar').offset().top;
$(window).scroll(() => {
if ($(window).scrollTop() > headerHeight) {
$('.toolbar').addClass('sticky');
} else {
$('.toolbar').removeClass('sticky');
}
});
};
CSS:
.toolbar {
width: 100%;
height: 84px;
position: relative;
}
.toolbar.sticky {
background-color: rgba(255,255,255,0.9);;
position: fixed;
top: 0;
z-index: 5;
margin-bottom: -84px;
}
HTML:
<div id="bcmMain" style="display: block;">
<h1 id="event-title"><span class="view-table-value" data-field-name="mopId">927</span> - <span class="view-table-value" data-field-name="subject">Sample Subject</span></h1>
<div class="toolbar">
<div class="status-toolbar-group toolbar-group">
<a class="button" id="level-button">Level <span class="view-table-value" data-field-name="level">3</span></a>
</div>
<div class="toolbar-group">
<a class="button" id="status-button">Status: <span class="view-table-value" data-field-name="status">complete</span></a>
<a class="button" id="pending-button">Mark Pending</a>
</div>
<div class="edit-toolbar-group toolbar-group">
<a class="button" id="submit-changes-button">Submit Changes</a>
<a class="button" id="cancel-changes-button">Cancel Changes</a>
</div>
<div class="toolbar-group">
<a class="button" id="edit-button">Edit</a>
<a class="button" id="clone-button">Clone</a>
</div>
</div>
<div id="edit-details">
<!-- CONTENT HERE -->
</div>
</div>
I've tried doing if ($(window).scrollTop() > headerHeight + 100) to see if allowing further scrolling before the it adds the sticky class, but it just changes the height at which the window is at when the glitch occurs.
What can I do to improve the code to get rid of this glitch?
EDIT: Added HTML. I tried to include just the relevant HTML, but let me know if anything else is needed. Thanks!
NOTE 1: This is embedded in a Confluence page. Confluence page header is hidden, but not the Confluence website header or the sidebar. See the below images to see what I'm talking about. Both images are at the top of the viewport at different scroll points.
Image of Not Sticky
Image of Sticky
NOTE 2: Not sure if this is important... data is pulled from a database via API to fill the fields on this page.
Not entirely sure I get what you mean, but I think you're referring to the 'bounce' of the content caused by removing the toolbar from the flow of the page.
The content always bounces the distance of the height of the toolbar regardless of the height of the content in relation to the viewport, but maybe it's more apparent then because you see the bottom of the content bounce as well as the top.
Anyway, if that is what you're referring to, I think this is your fix:
.toolbar.sticky {
position: fixed;
top: 0;
background-color: rgba(255,255,255,0.9);
}
.toolbar.sticky + #edit-details {padding-top:84px;}
I removed z-index:5; and margin-bottom:-84px; because they weren't doing anything.
Instead I added the .toolbar.sticky + #edit-details {padding-top:84px;} rule.
What this does is, it adds padding-top to the #edit-details that directly follows the .toolbar.sticky (that's what the + is for, read about it here). In other words; the padding-top of the content is dependent on the toolbar having the sticky class.
So when the .sticky class is added to the toolbar - and thereby 84px is removed from the flow of the page (which caused the 'bounce') - that same 84px is added again just before the content in the form of padding, causing the content to stay at exactly the same place.
When the .sticky class is removed again, the padding is removed again too.
- The padding-top should have the same value as the toolbar height.
I also removed position:relative; from .toolbar, because again, it wasn't doing anything.
You can test it below in the code snippet, though it may be easier to test in the jsfiddle, because there you can adjust the height of the viewport.
$(document).ready(function() {
let headerHeight = $('.toolbar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > headerHeight) {
$('.toolbar').addClass('sticky');
} else {
$('.toolbar').removeClass('sticky');
}
});
});
.toolbar {
width: 100%;
height: 25px;
border-bottom: 2px solid blue;
}
.toolbar.sticky {
position: fixed;
top: 0;
background-color: rgba(255,255,255,0.9);
}
.toolbar.sticky + #edit-details {padding-top:25px;}
/*ONLY FOR VISUAL STYLING*/
.toolbar-group {margin-right:5px; float:left;}
.toolbar-group a {float:left; padding:1px;}
.toolbar-group .button {background:lightblue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bcmMain" style="display: block;">
<h1 id="event-title"><span class="view-table-value" data-field-name="mopId">927</span> - <span class="view-table-value" data-field-name="subject">Sample Subject</span></h1>
<div class="toolbar">
<div class="status-toolbar-group toolbar-group">
<a class="button" id="level-button">Level <span class="view-table-value" data-field-name="level">3</span></a>
</div>
<div class="toolbar-group">
<a class="button" id="status-button">Status: <span class="view-table-value" data-field-name="status">complete</span>|</a>
<a class="button" id="pending-button">Mark Pending</a>
</div>
<div class="edit-toolbar-group toolbar-group">
<a class="button" id="submit-changes-button">Submit|</a>
<a class="button" id="cancel-changes-button">Cancel</a>
</div>
<div class="toolbar-group">
<a class="button" id="edit-button">Edit|</a>
<a class="button" id="clone-button">Clone</a>
</div>
</div>
<div id="edit-details">
content - first<br>content - second<br>content - third<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content - forelast<br>content - last<br>
</div>
</div>
jsfiddle: https://jsfiddle.net/nd9etLjy/1/
I added some CSS to style the toolbar, this is not important for functionality.
I also changed your arrow-functions to regular ones, because I couldn't get the arrow-functions to work, but that's most likely due to my inexperience with them.
okay here's an example of what i am trying to ask,
the nav bar of usatoday.
I'm using bootstrap affix. here's my code
<div class="header">
<div class="header-1">
<h1>this is some logo</h1>
</div>
<div class="header-2">
<h3>this is some heading</h3>
</div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
this is a footer
</div>
JavaScript
$('.header-2').affix({
});
how can I make the div header-2 to be fixed on the top, (when there is some scrolling and the div header-2 just reach the top position) as of the site I've mentioned earlier?
I would love to see the header-1 and header-2, but some scrolling should hide header-1 and stick header-2 to the top most.
thanks
See this Jsfiddle
you can check the position of the slider and add class accordingly
$(window).scroll(function () {
if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
$('#header-2').addClass('posi');
} else if ($(window).scrollTop() == 0){
$('#header-2').removeClass('posi');
}
});
use jquery look at this example
http://jsfiddle.net/5n5MA/2/
var fixmeTop = $('.fixme').offset().top; // Get initial position
$(window).scroll(function() { // Assign scroll event listener
var currentScroll = $(window).scrollTop(); // Get current position
if (currentScroll >= fixmeTop) { // Make it fixed if you've scrolled to it
$('.fixme').css({
position: 'fixed',
top: '0',
left: '0'
});
} else { // Make it static if you scroll above
$('.fixme').css({
position: 'static'
});
}
});
Bootstrapped answer using Bootstrap.affix()
$('.header-2').affix({
offset: {
top: function () {
return (this.top = $(".header-2").offset().top);
}
}
});
This also needs CSS for the fixed positioning (see the Docs).
The affix plugin toggles between three classes, each representing a
particular state: .affix, .affix-top, and .affix-bottom. You must
provide the styles for these classes yourself (independent of this
plugin) to handle the actual positions.
.header-2.affix {
top: 0;
}
Working example at Bootply: http://www.bootply.com/S03RlcT0z0
<style>
.header {
top: 0%;
left: 0%;
width: 100%;
position:fixed;
}
</style>
I'm sorry didnt look at your problem carefully.
This may helps you Issue with Fixed Header and Bootstrap Affix / Scrollspy - Not jumping to correct location
+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?
I go right to the point, I have a few boxes that I want them to be expanded and collapsed with a toggle located in their headers.
This toggle is an anchor tag which has a sprite background, the top part of this sprite image is pointing at top, and bottom section is pointing at down. You can guess what they mean and I want their state to be changed (first one for collapse and second one for expand)
The structure of the boxes are something like this :
<section class="box2">
<header class="box-head">
<div class="box-title fr">
<span class="box-icon"></span>
<h3 class="box-title-text">Title Title</h3>
</div>
<a class="box-toggle fl active" href="#">A</a>
<br class="cfx" />
</header>
<div class="box-content">
<img src="img/chart-1.png" alt="" />
//Content or collapsing data goes here
</div>
</section>
And I used one of the most straight forward ways to achieve this effect. You can see the following CSS and jQuery code below. (I chose active class as default when the icon is pointing at top)
JS :
<script type="text/javascript">
$("a.box-toggle").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//Slide up and down on click
$("a.box-toggle").click(function(){
$(this).next("div.box-content").slideToggle("slow");
});
});
</script>
CSS :
.widget-toggle {
display: block;
overflow: hidden;
text-indent: -9999px;
width: 18px; height: 9px;
margin-top: 15px;
margin-left: 13px;
background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}
.widget-toggle.active {
background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}
Thanks for your huge help :)
Edit No. #1 :
Thanks to #Recode , their tip worked just fine, But according to what I explained and you can see in this picture. I wanna show the state of this with an Icon
Active is pointing at top and Inactive is pointing at bottom, when I want the box to be collapsed I'm showing "Active" and when I want the box to be expanded I'm showing "Inactive" .
With this code I managed to show active at default (I set the class of each box to active manually, if there is a better way to set the default class to active or whatever else please note.)
When I click on it, box collapses and the Icon transitions to Inactive state. And When I click again box expands but the Icon stays in the same state (Inactive and pointing at bottom).
And after clicking :
Here is the Code :
$("a.box-toggle").click(function(){
$(this).addClass("active");
}, function () {
$(this).addClass("inactive");
});
Thanks a lot, Again.
Just use this:
$(document).ready(function() {
//Slide up and down on click
$("a.box-toggle").click(function(){
$(this).toggleClass('inactive');
$(this).parent().next("div.box-content").slideToggle("slow");
});
});
http://jsfiddle.net/Recode/DLxaB/
updated fiddle: http://jsfiddle.net/Recode/DLxaB/1/
Try this: FIddle
jQuery code:
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});
.slideToggle() .toggleClass()
I have a site on Google App engine written in python/django/html. Site is located at http://perlesloyfer.no
Its a kind of blog that shows some images of people with a kind of bows i make. I have implemented a "sticky header" at the top, and im showing ads in the 9th position of the posts. But when i scroll the list the Google Ads are somehow forcing them self to be on top of the header. Image of this is in the bottom of the question.
What causes this, and is it possible to fix it? I want the ad to scroll like the other posts, but it should not show as it is "over" the header when its at that position.
Sticky header jquery code:
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#sticky').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
//$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
$('#sticky').addClass("sticky");
} else {
$('#sticky').removeClass("sticky");
}
});
});
Actual HTML for the header:
<div id="sticky" class="top-area">
<div class="main-header">Perlesløyfer</div>
<div class="main-subheader"><p>Av Håkon Bogen</p></div>
<div class="tabs">
<ul>
<li>Bilder</li>
<li><a class="selected" href="./about">Om</li></a>
<li>Kjøp</li>
<li>Last opp</li>
</ul>
</div>
CSS for sticky:
#sticky {
background-color: white;
position:fixed;
top:0;
width:100%;
}
Google Ad code:
<div class="commercial" id="page-wrap-ad">
<p id="ads">
<!--- google_ad_client = .... -->
<script type="text/javascript">
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
Not sure if I am allow to post this or not, but here goes:
Find the specific target element (div, class, etc) of the Ad in questions and use CSS to overwrite its positioning.
Example:
#myAnnoyingAd{
position: fixed !important;
top: 0 !important;
left: 0 !important;
}
Just added a greater z-index to the sticky header. Wasn't harder than that.
#sticky {
background-color: white;
position:fixed;
top:0;
width:100%;
z-index:1000;
}