Issue with affixed content

HTML & CSS
1

Hello

I made the content fixed when user scroll 70px from top - some kind of bootstrap affix, and it works.

define(['jquery'], function($){
  'use strict';

  // Sticky and affix
  var $window   = $(window),
      $document = $(document),
      $article  = $('.SingleArticle__info-wrap');

  $window.on( 'load scroll', function() {
    var scrolled = $document.scrollTop();

    // Affix for article text
    if(scrolled > 70){
      $article.addClass('affix');
    }else{
      $article.removeClass('affix');
    }
  });
});

Style for affix

.affix {
  max-width: 26vw;
  position: fixed;
  top: 5.5em;
}

The content that is affixed is basically blog post and I have a problem if there is a lot of content (height is big), user can’t read whole blog post until he do zoom out in his browser - which is not good :slight_smile:

This is more UX Question, what is best soution to fix this ? I know maybe set overflow-y: scroll for the blog post div, but I’d rather to go something another if it exist.

I hope you understand me.

Thanks.

2

I think you more or less answered the question yourself.:slight_smile:

Fixed positioned elements (which affix does) is usually reserved for a small heading or a small footer. If you have lots of content to view then fixed elements are really of no use because if they extend out of the viewport they are unreachable unless you put another scrollbar on the inner element and make sure its height matches the viewport height.

Mobile browsers hate fixed elements anyway as so its best to remove all but the simplest header or footer on small screen anyway.

Don’t do it.:slight_smile:

Why would you want to fix a whole blog post into position anyway. What benefit is that to your visitor?

If you still wanted to go that route then you would need to write a script that detects if your blog post content is taller than the viewport and if so remove the fixed positioning. This would need to be done on resize also as text content will be taller/smaller as the browser is resized. (Not to mention the user may have resized the text also so the problems keep mounting.)

Maybe you could just fix the blog title instead?

2 Likes
3

Thanks, I think in same way, now It’s deleted :slight_smile:

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.