Jump to content

a tutorial and a qustion-very easy fixed the top menu(fixed with scroll)

babak1410

By babak1410
in Core developers

 Share

Recommended Posts

babak1410 Newbie

babak1410

Posted
Posted

hello.

I got the following code to fix the menu float.

FOR PRESTASHOP 1.6.0.6.

 

 

(References: http://codepen.io/senff/pen/ayGvD)

 

 

just put them at the end of .../themes/default-bootstrap/js/global.js

 

 

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Create a clone of the menu, right next to original.
$('.sf-contener').addClass('original').clone().insertAfter('.sf-contener').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}

////////////////////////////////////////

with this method, javascript automatically fixed the top menu, And does not require anything to be done.

 

But I do not know why it will not work with version PERSTASHOP 1.6.0.14 and 1.6.0.13.

Does anyone can give suggestions for the new version?

 

(when use this code with 1.6.0.14 the firebug returns this error :  TypeError: orgElementPos is undefined

 

and when i delete  ".top" from end of orgElementTop = orgElementPos.top(line 12 ) dont return any error but not working yet.)

 

I hope you find it useful.

Sorry for bad English -
I am using Google Translator

 

 

Link to comment
Share on other sites
babak1410 Newbie

babak1410

Posted
  • Author
Posted

hello again.

i fined this solution that complatly work with PRESTASHOP 1.6.0.14:

(References:http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/)

 

 

1)add this to .../themes/default-bootstrap/js/global.js :

/////////////////////////////////////

jQuery("document").ready(function($){
    
    var aaa = $('.sf-contener');
    var bbb = $('.sf-contener').offset();
    ddd=bbb.top;
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > (ddd)) {
             aaa.addClass("f-nav");
        } else {
             aaa.removeClass("f-nav");
        }
    });
 
});

///////////////////////

2)add this to .../themes/default-bootstrap/css/global.css :

/************************************/

.f-nav {
    margin: 0 auto;
    padding-top: 0 !important;
    position: fixed;
    top: 0;
    width: 1170px;
    z-index: 9999;
}

 

/************************************/

i test it and work for me,I hope useful for you too.

  • Like 2
Link to comment
Share on other sites
  • 3 weeks later...
Rubenmo Newbie

Rubenmo

Posted
Posted

hello again.

i fined this solution that complatly work with PRESTASHOP 1.6.0.14:

(References:http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/)

 

 

1)add this to .../themes/default-bootstrap/js/global.js :

/////////////////////////////////////

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

    

    var aaa = $('.sf-contener');

    var bbb = $('.sf-contener').offset();

    ddd=bbb.top;

    

    $(window).scroll(function () {

        if ($(this).scrollTop() > (ddd)) {

             aaa.addClass("f-nav");

        } else {

             aaa.removeClass("f-nav");

        }

    });

 

});

///////////////////////

2)add this to .../themes/default-bootstrap/css/global.css :

/************************************/

.f-nav {
    margin: 0 auto;
    padding-top: 0 !important;
    position: fixed;
    top: 0;
    width: 1170px;
    z-index: 9999;
}

 

/************************************/

i test it and work for me,I hope useful for you too.

 

Simply fantastic!!!

Link to comment
Share on other sites
  • 2 weeks later...
stoo_s Newbie

stoo_s

Posted
Posted

I used the same code a couple of months ago and have excellent results on desktop computers but have also found that it doesn't work well on smartphones. Have you found a way to turn it off when a smartphone is being used?

Link to comment
Share on other sites
stoo_s Newbie

stoo_s

Posted
Posted

I've had another look at this today and have now managed to solve it thanks to some code from prestashop user Almaj. Replace the jQuery code at the bottom of the superfish-modified.js file with the following...

 

})(jQuery);
jQuery(function(){
    jQuery('ul.sf-menu').superfish();
var sticky = $('.sf-menu').offset().top;
$(window).scroll(function(){
 
if ($(window).width() > 1182){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
} else {
$('.sf-menu').css({position: 'relative'});
 
}
}
if ($(window).width() > 974 && $(window).width() < 1183 ){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
} else {
$('.sf-menu').css({position: 'relative'});
 
}
}
if ($(window).width() > 750 && $(window).width() < 975){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
} else {
$('.sf-menu').css({position: 'relative'});
 
}
}
 
});
});
Link to comment
Share on other sites
  • 2 weeks later...
Rubenmo Newbie

Rubenmo

Posted
Posted

 

I've had another look at this today and have now managed to solve it thanks to some code from prestashop user Almaj. Replace the jQuery code at the bottom of the superfish-modified.js file with the following...

 

})(jQuery);
jQuery(function(){
    jQuery('ul.sf-menu').superfish();
var sticky = $('.sf-menu').offset().top;
$(window).scroll(function(){
 
if ($(window).width() > 1182){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
} else {
$('.sf-menu').css({position: 'relative'});
 
}
}
if ($(window).width() > 974 && $(window).width() < 1183 ){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
} else {
$('.sf-menu').css({position: 'relative'});
 
}
}
if ($(window).width() > 750 && $(window).width() < 975){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
} else {
$('.sf-menu').css({position: 'relative'});
 
}
}
 
});
});

 

 

Hello again!

 

The problem with the mobile view is now solved, but I located another problem, when you reach the end of the product gallery and want to move to the next page (1,2,3 ...) does not put you at the beginning of the page and there are many products that are above.

Link to comment
Share on other sites
stoo_s Newbie

stoo_s

Posted
Posted

Hi Rubenmo,

 

I've checked this problem on my own site but my pages are loading as they should. The code above shouldn't have effected your pages loading and dropping you to the bottom of the page so you would be best asking this question in a new topic. Sorry that I can't be of much help.

Link to comment
Share on other sites
  • 3 months later...
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...