0

I am working on Urban Life template of joomla XTC framework. Its header can be made sticky from back-end (I made it non-sticky from back-end). I am adding a div which contains a banner above the existing header of template and it should be non sticky. while the header containing menu should stick after scroll. I added the following code

$(function(){


        var stickyHeaderTop = $('#header').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#header').css({position: 'fixed', top: '0px'});

                } else {
                        $('#header').css({position: 'static', top: '0px'});

                }
        });
  });

The existing code of template is as follows

<?php if ($stickyClass == 'sticky' && !$xtc->agent->isMobile) { ?>
<script>
  jQuery(window).scroll(function () {
      if (jQuery("#headerwrap").offset().top > 1) {
          jQuery("#headerwrap").addClass("stickyscroll")
      } else {
          jQuery("#headerwrap").removeClass("stickyscroll")
      }
  });

</script>

<?php } ?>

Now to display we have the following code in the body. Note the div top is added by me.

<body class="<?php echo $pageview;?> <?php echo $stickyClass;?> <?php echo $pageclass; ?> <?php echo $extension; ?>">


    <div id="headerwrap" class="<?php echo $stickyClass;?> xtc-bodygutter">

        <div id="top">
        <p style=""><img style="display: block; margin-left: auto; margin-right: auto; border: 1px solid #ffffff; width: 725px;" src="images/banners/jeeptop.gif" alt="" /></p>
        </div>


        <div id="header" class="<?php echo $hdclass; ?> clearfix">
            <div id="logo" class="hd2">
                <a class="hideTxt" href="index.php">
                    <?php echo $app->getCfg('sitename');?>
                </a>
            </div>

It didn't work. Please suggest any solution.

Improve this question
2

1 Answer 1

Reset to default
2

Firstly, disable the sticky header for your template. The add the following into your CSS file:

#header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

Then your jQuery scroll detection will be as follows:

jQuery(document).ready(function($){

    var headerwrap = $('#header');

    $(window).scroll(function(){

        var scroll = $(this).scrollTop();
        var topDist = 100;

        if( scroll > topDist ) {
            headerwrap.addClass('sticky');
        }
        else {
            headerwrap.removeClass('sticky');
        }
    });

});

You can of course change 100 which is the scroll offset to whatever you wish. Just remember that adding a class to an element and targeting that class via CSS is far better than actually using jQuery to add CSS to an element.

Hope this helps

Improve this answer
2
  • It also didn't work. Actually I have tested my code in html file and it was working perfectly but not working in the template.
    – Agha
    Commented Feb 8, 2015 at 6:38
  • Thanks @Lodder, I just added #header.sticky in CSS file instead of .sticky and it worked.
    – Agha
    Commented Feb 9, 2015 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.