XF 1.2 Floating Top Bar with Anchor Links to posts

Russ

Well-known member
This has me stumped and I'm hoping someone else can help with an answer.

I have a floating top bar on a clients site, that works fine however when clicking on an alert to a new post the link takes them to the right post, but hides the top portion of the post due to the floating top bar. This results in users having to scroll up a tiny bit to see the post.

I've played with a few different ideas that simply aren't working and I'm hoping someone can turn the light bulb on for me :).

One example is @Chris Deeming 's site(uses UI.X)

http://xenmediagallery.com/threads/some-new-stuff.394/#post-2018

Same problem.
 
I've tried multiple things.

Code:
.messageList .message:before {
  display: block;
  content: " ";
  margin-top: -{height of fixed header}px;
  height: {height of fixed header}px;
  visibility: hidden;
}

But for some reason its not working. I tried some javascript (if (window.location.hash) {}etc;)

Ill keep thinking. Its a tough one. I know there are a few fixes on it in the Gumby framework and various others.
 
I've tried multiple things.

Code:
.messageList .message:before {
  display: block;
  content: " ";
  margin-top: -{height of fixed header}px;
  height: {height of fixed header}px;
  visibility: hidden;
}

But for some reason its not working. I tried some javascript (if (window.location.hash) {}etc;)

Ill keep thinking. Its a tough one. I know there are a few fixes on it in the Gumby framework and various others.

Tried that one too with no luck, if you don't mind keep us posted if you find a good fix :D
 
Heh its the last noteworthy bug imo of the skin. And its an irritation, rather than a bug that gets in the way. And I am working on it, and have been, for quite a while.

I've got it workin with this:

Code:
<script>

$(document).ready(function() {
    if (document.location.hash) {
        $('html, body').animate({scrollTop: $(document.location.hash).offset().top - 110}, 2000);
    }
});
</script>

But there are a few issues with it:

1. there is a jump
2. It doesnt work in every scenario where there is a hash, afaik
3. For UI.X, the theme is based on variables. So, as a framework I dont want people to have to change that 110 value (where that is the height of your fixed header), so mine has to be based on relativity and not specific values. :/

ETA: Of course you don't need to use animate() if you don't want it to animate.
 
Code:
$(document).ready(function(){
    var target = '';
   
    if (document.location.hash) {
        target = document.location.hash,
        $target = $(target);
       
        if ($target) {
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top - 110
            }, 900, 'swing', function () {
                window.location.hash = target;
            });
        }
       
    }
    $('a[href^="#"]').on('click',function (e) {
   
        //e.preventDefault();
       
        target = this.hash,
        $target = $(target);
        if ($target) {
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top - 110
            }, 900, 'swing', function () {
                window.location.hash = target;
            });
        }
       
    });
});

This kinda works. Its just that category hrefs start with a period and that throws the script off. Not sure why XenForo does this, but Ill write a check for it.
 
@Mike Creuzer really old thread but still an issue, your code works fine except for hitting the Quote-button on a page. In this case it ignores the top -xy amount and cut the post or on a small display just shows have of the editor. May I ask if you ever fixed/finalized this? Thanks in advance
 
@Mike Creuzer really old thread but still an issue, your code works fine except for hitting the Quote-button on a page. In this case it ignores the top -xy amount and cut the post or on a small display just shows have of the editor. May I ask if you ever fixed/finalized this? Thanks in advance
We fixed this in UI.X after hours and hours of testing and tweaking. Not a simple fix by any means but we got it. We had to.
 
thanks Mike, good to that there is a solution. Just can't switch to UI.X just for that, by far too many custom changes already.
No problem with buying a license but I fear there is more involved than just a few lines of js-code?
 
thanks Mike, good to that there is a solution. Just can't switch to UI.X just for that, by far too many custom changes already.
No problem with buying a license but I fear there is more involved than just a few lines of js-code?
The way we have it fixed is integrated with a few other features that we have, as well as our specific implementation of the sticky bar (we have two: userbar and navbar). This integrates with our sticky sidebar, our responsive features, etc.
 
Top Bottom