I remember seeing an example of this recently, but for the life of me I can't find the site.
It was a button or something similar that sat in its place near the top of the screen, then when you scroll down it stays on screen.
Now that I think about it, it must have been javascript-powered, but it looked really natural.
Does anyone know of a site with this functionality or information on how to do it?
EDIT
No, it wasn't just position:fixed or permanently floated using javascript.
Thanks durilai for pointing out that this has been covered: How to make an element slide with the viewport as it scrolls?
As it turns out, it was right here on SO (the question editing page) that I saw this. The "How to Format" box sits to the right of the editing box and moves with the rest of the page, but becomes position:fixed when it should be scrolled out of view.
This is done by SO using jQuery. I think they have some custom code there, but here is my implementation:
var scrollerTopMargin = $("#scroll-container").offset().top;
$(window).scroll(function(){
var c = $(window).scrollTop();
var d = $("#scroll-container");
if (c > scrollerTopMargin) {
d.css({ position: "fixed", top: "0px" });
}
else if (c <= scrollerTopMargin)
{
d.css({ position: "relative", top: "" });
}
});
Related
A working demo of a template I've modified can be found at the following url:
https://newbloggerthemes.com/base-wp-blogger-template/demo/
I've been unable to determine what is causing a annoying bounce of the fixed navigation menu. If you scroll the page downward the menu should move upward and stop when its top border reaches the top of the page; however, it actually moves just past the top of the page and then snaps back, causing a annoying bounce.
How do I get rid of this bounce? I am assuming that this might be caused by the jQuery code used to query the menu's position. Its as if the code is fixing the issue afterward as opposed to preventing it from happening in the first place.
I've removed the header from the original template so that the menu initially appears at the top; however, when the user first scrolls the page downward the menu bounces in a similar fashion so the defect is in the original template and not due to any changes I've made.
I've posted the modified template at the url below in case the code below is not enough.
https://1drv.ms/t/s!AnHSMVz7JJ2Ocf9KoYS67t_6ZqI
jQuery(document).ready(function($) {
var $filter = $('.main-navigationbwrap');
var $filterSpacer = $('<div />', {
"class": "filter-drop-spacer",
"height": $filter.outerHeight()
});
if ($filter.size())
{
$(window).scroll(function ()
{
if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
{
$filter.before($filterSpacer);
$filter.addClass("fix");
}
else if ($filter.hasClass('fix') && $(window).scrollTop() < $filterSpacer.offset().top)
{
$filter.removeClass("fix");
$filterSpacer.remove();
}
});
}
});
Okay, you're done removed the header HTML.
Now you can also removed that jQuery. Becuase to make sure your menu navigation position always fixed at the top, you can do that just by CSS only. Example CSS is below.
.site-headerbwrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
in you case: paste CSS code above before ]]></b:skin> line and then Save your Template
I have a jQuery selectmenu list which opens as a popup because it so long. What I'd like is a "back to top" button at the end of the list. I found this tutorial which looks like it should do the trick, except that it doesn't show the "Back to Top" text because I imagine that it's underneath the popup. Any ideas how to get around this? Or another implementation of a "back to top" solution?
Break it down by parts. The Back to Top will automatically put you on the top of the page. It's no rocket science.
Then you can add some styling via CSS. In this case the tutorial uses the class "back to top". Back to Top. You can make this look like whatever you want, no big deal.
However, I'll recommend you keep this bit of code, since is the one that positions it. position: fixed; bottom: 2em; right: 0px;. As a side note, replace position:fixed with position:relative, so it appears on the popup.
Then, you can add some nice smooth scrolling effects or whatever you want.
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
Tell me how it goes. Cheers, Sebastian.
I'm working on a Wordpress blog design, and running into an issue with the entry-header. I would like my entry-header to be offset, going outside the bounds of it's container, yet scrolling with the content, inside the content wrap. Here is a screenshot of what i'm trying to achieve.
]1
I'd like to have the red areas scroll along with the text of the blog post, but so far, the only way I've been able to get the red areas to be offset as seen above, is to set position: absolute. When position is set to relative, it shows up as seen below.
Do you have any ideas that could help me resolve this issue?
Thanks.
give it position relative with higher z-index
position:relative;
z-index:10;
left:-50px;
JSFiddle
As user #divy3993 states a fiddle would be helpful.
Anyway: The overflow of your outer div seems to be hidden. This is the reason why you don't see the left part of your header when position is relative.
Apply the css-property
overflow-x: visible;
to your outer div (the one with the dark background) and the full header should be shown.
EDIT:
Sorry for keep you waiting.. I had a while no look at SO.
Sadly the solution that i was thinking of (with pure CSS) does not work as it is pointed out in https://stackoverflow.com/a/6433475/1402667 the combination of
overflow-x: visible
and
overflow-y: auto
won't work as expected.
So it seems you have to use JavaScript to solve your issue. I had a look at the link that you are pointing out in comments (http://basil-gen.marathonwp.com/blog/) and successfully run the following jQuery code there:
var $headers = $('.site-inner h1');
var $scrollContainer = $('.site-inner .content-sidebar-wrap');
var hideShowHeaders = function(visibleTop, visibleBottom){
$headers.each(function(){
if($(this).show().offset().top < visibleTop || $(this).offset().top + $(this).outerHeight() > visibleBottom){
$(this).hide();
}else{
$(this).show();
}
});
};
$headers.each(function(){
$(this).data('initTop', $(this).position().top);
});
hideShowHeaders($scrollContainer.offset().top, $scrollContainer.offset().top + $scrollContainer.height()); //might consider borders
$scrollContainer.scroll(function(){
$headers.each(function(){
$(this).css('top', $(this).data('initTop') - $scrollContainer.scrollTop() );
});
hideShowHeaders($scrollContainer.offset().top, $scrollContainer.offset().top + $scrollContainer.height()); //might consider borders
});
It essentially repositions the headers whenever your content container is scrolled. When the headers (or a part of those) would not be visible with position:relative those headers are hidden. In all other cases they are shown.
As i mentioned it's jQuery-Code so you need to include jQuery yet and e.g. execute above code inside
$(document).ready(function(){
...code above
});
If you want to straight test it you can browse to your site (http://basil-gen.marathonwp.com/blog/) open Javascript-Console,
inject jQuery via javascript e.g. like
var script = document.createElement('script');
script.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
and then execute above code in Javascript-Console (when directly testing it you should not have scrolled before executing javascript code).
I should mention that the code above is not perfect since it only shows and hides headers instead of showing e.g. 50% of it. I couldn't come up quickly with a solution for it. Anyway you could do this with a more complex showHideHeaders-function where marked lines need to be implemented
var hideShowHeaders = function(visibleTop, visibleBottom){
$headers.each(function(){
if($(this).show().offset().top + $(this).outerHeight() < visibleTop){
if($(this).offset().top < visibleTop){
$(this).hide();
}else{
//lower part of this header needs to be displayed
var bottomPxToShow = $(this).offset().top + $(this).outerHeight() - visibleTop;
var hiddenPx = $(this).outerHeight() - bottomPxToShow;
//show lower bottomPxToShow Pxs of header
}
}else if($(this).offset().top + $(this).outerHeight() > visibleBottom){
if($(this).offset().top > visibleBottom){
$(this).hide();
}else{
//upper part of this header needs to be displayed
}
}else{
//show full header
}
});
};
I hope that helps you!
I'm currently working on my new portfolio you can see here: http://katharinakoeth.de/neu/
And there's already my problem. As you can see, I added some jquery action to my subheads (i'm really a beginner when it comes to javascript) to change its position from inherit to fixed/sticky .. but when the change happens, my content jumps up because of the sudden space.
ยป it's most obvious with the "people I enjoy working with" ... the first person suddenly disappears as soon as the subhead becomes sticky.
Is there any way to either add extra space or prevent the jump in another way?
When you change those subheaders to position:fixed, they're removed from the flow of the document. They have a margin-bottom: 75px which is also removed from the flow when that happens.
Try changing that to a margin-top:75px to the start of the blocks below each subheader; that won't "disappear" when the subheads change position values, so your spacing should be preserved.
FYI, your fix.js file could probably be refactored down to something like this:
var $titles = $("header h2");
$(window).scroll(function(){
var win_top = $(this).scrollTop();
$titles.each(function(){
var div_top1 = $(this).offset().top;
if (win_top > div_top) $(this).addClass('stick')
else $(this).removeClass('stick');
});
});
I'm trying to implement the effect the logo has in this page, where it is fixed on the top of the page, but when scrolling down, only a part of it remains visible, not the whole element.
I have found plenty of jquery plugins that will keep the top of an element at the top of the page, but none that will let me customize how high the element will stay. My javascript is not up to coding something from scratch. Does anyone have any suggestions for plugins that might be useful?
You shouldn't need a plugin for this. CSS can keep the logo fixed and you can use JavaScript to change the display of the element once the user begins to scroll the page.
Assuming that your logo has the ID of logo, the CSS would be:
#logo {
top: 0;
position: fixed;
}
Since it appears you're using jQuery, you can do something like this:
$(function() {
// gets a reference to the document based on which browser is being used
var oDoc = $.browser.msie === true ? window : document;
// event handler for when the user scrolls
$(oDoc).scroll(function() {
// if the user is at the top, display the whole image
if($(this).scrollTop() === 0) {
$('#logo').css('margin-top', 0);
// otherwise, pull the image up a single em (200 is arbitrary)
} else if($(this).scrollTop() > 200) {
$('#logo').css('margin-top', '-1em');
}
});
});