Skip to main content

Prevent a html element to stop moving at certain point when page is scrolled


We should make the position of the element fixed. For this, the following small jquery snippet will fulfill the requirement.

jQuery(window).scroll(function() {       
        var button = jQuery("#div").position().top;   
        var window_top = jQuery(window).scrollTop();       
        if(window_top <= top || window_top >= button) {
            jQuery("#sbasket").removeClass('sticky');          
        } else {
            if(window_top > top) {
                jQuery("#sbasket").addClass('sticky');
            }
        }
    });

and on css,

.sticky{position:fixed;top:0;}


Cheers!!
Labels:

Comments

Post a Comment

Popular posts from this blog

Error on payment method when placing order "No Such Entity With Cart ID"

No Such Entity With Cart ID Error on payment method when placing order. If you receive the error message " No such entity. ", " No such entity with " or "No such entity with  customerId,OrderId " in Magento 2, the issue usually occurred when you try to load not existing object via Magento 2 Repository Class. To debug this issue, please open the file vendor/magento/framework/Exception/NoSuchEntityException.php and at the beginning of the  __construct  method temporary add debug backtrace code: foreach ( debug_backtrace () as $_stack ) { echo ( $_stack [ "file" ] ? $_stack [ "file" ] : '' ) . ':' . ( $_stack [ "line" ] ? $_stack [ "line" ] : '' ) . ' - ' . ( $_stack [ "function" ] ? $_stack [ "function" ] : '' ); } exit (); example: public function __construct ( Phrase $phrase = null , \...
Post a Comment
Read more

Prestashop Add canonical and hreflang for multi-language website

The cannonical and hreflang tags are useful if our store is multi-language. It avoids duplication of url for each store and helps the site SEO by mentioning the url of different languages. This will indicate to the google crawlers which is the alternative link for each languages and / or geographical areas where the online store and the canonical url of the product are available, category, manufacturer list, which in many cases will be very useful. We can add the cannonical and hreflang tags on prestashop at the header.tpl template file. The template files are under theme/yourthemename folder. The following code needs to be added inside the head section: { if $ page_name == 'category' } <link rel = "canonical" href = "{$ link-> getCategoryLink ($ smarty.get.id_category, null, $ id_lang, null, null)}" />  { if $ languages | @ count > 1 } { foreach $ languages as $ lang } <link rel = "alternate" hreflang = "{$ lang.iso_...
1 comment
Read more

Special Character (Zero-width joiner)

The zero-width joiner (ZWJ) is a non-printing character used in the computerized typesetting of some complex scripts such as the Arabic script or any Indic script. When placed between two characters that would otherwise not be connected, a ZWJ causes them to be printed in their connected forms. It means it doesnot take additional space. It is   &zwj; Useful when we need to output some html that don't need space. In some editors like tinymce, when we put the html that don't contain space then it will not save that html and will remove it from editor. For eg: <a href=".."></a> When we try to save the above html on tinymce editor, it will remove it from the content because it doen't have any character inside it. So, to overcome that problem we can use this special zero-width joiner character in between. It is a character that don't output extra space.  <a href="..">&zwj;</a> Happy coding!!!
3 comments
Read more