【问题标题】:jQuery works after page refreshjQuery在页面刷新后工作
【发布时间】:2017-01-19 00:10:27
【问题描述】:

我正在使用jQuery mash menu plugin,并且我的页面顶部有一个固定菜单,但在响应时,我的固定菜单本身并未设置为display:block。页面刷新后,它设置为display:block,但如果我删除插件或插件的 HTML 结构,一切正常。我想问题出在 mash 菜单插件上,但我必须使用这个插件。

我的固定菜单是如何工作的?

默认情况下我的固定菜单不会出现,但如果我向下滚动到预订页面,它会自行设置display:block。 (只是响应

编辑:不仅仅是固定菜单 - 返回顶部菜单在移动设备上不起作用

我的 JS

$(window).load(function(){
       if (!$(".hotel-search-box").length) {
     return false; //Check if the element exist
  }
  $(window).scroll(function() {
  if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height()){
          $(".sticky-checkin").fadeIn(500);
      }else{
          $(".sticky-checkin").fadeOut(500);
      }
  });
})

MASH 插件 JS

  $('.mash-menu').mashableMenu({
                separator                      : true,      //-- Options (true) or (false). This option is used to show the vertical line between menu list items
                ripple_effect                  : false,      //-- Options (true) or (false). This option is used to on - off the google ripple effect on menu items. Which is shown on mouse click
                search_bar_hide                : false,     //-- Options (true) or (false). This option is used to hide the search bar
                top_fixed                      : false,     //-- Options (true) or (false). This option is used to fixed the menu top of the screen. Note: If this option becomes true then the sticky_header option will not work
                full_width                     : false,     //-- Options (true) or (false). This option is used to make the menu full with
                right_to_left                  : false,     //-- Options (true) or (false). This option is used to align the menu items right to left side order
                trigger                        : 'hover',   //-- Options (click) or (hover). This option is used to showing the drop down on mouse click or mouse hover
                /* VERTICAL TABS */
                vertical_tabs_trigger          : 'click',   // Options (click) or (hover). This option is used to showing the vertical tabs on mouse click or mouse hover
                vertical_tabs_effect_speed     : 400,       // Value in milliseconds. This option is used to change the vertical tabs showing or hiding speed
                /* RESPONSIVE TABS */
                //responsive_tabs_effect_speed   : 200,       // Value in milliseconds. This option is used to change the responsive tabs showing or hiding speed
                /* DROP DOWN */
                drop_down_effect_in_speed      : 200,       // Value in milliseconds. This options is used to change the drop downs showing speed
                drop_down_effect_out_speed     : 200,       // Value in milliseconds. This option is used for change the drop downs hiding speed
                drop_down_effect_in_delay      : 200,       // Value in milliseconds. This option is used to change the drop downs showing delay speed. It means drop down shows after some time
                drop_down_effect_out_delay     : 200,       // Value in milliseconds. This option is used to change the drop downs hiding delay speed. It means drop down hides after some time
                outside_close_dropDown         : true,      // Options (true) or (false). This option is used to hide the showing drop downs when user click outside the menu
                /* STICKY HEADER */
                mobile_search_bar_hide         : false,     //-- Options (true) or (false). This option is used to hide the search bar on mobile mode
                mobile_sticky_header           : false,     //-- Options (true) or (false). This options is used to make the menu sticky on top of the screen on mobile mode
                mobile_sticky_header_height    : 100,       //-- Value in milliseconds. This option is used to change the sticky header animation effect speed on mobile mode
                /* MEDIA QUERY WIDTH */
                media_query_max_width          : 768       //-- This is media query max width in px unit. Which is Used for mobile screen. Don't change if you don't know about media query
            });

click to demo address

编辑:如果您查看响应式 (

【问题讨论】:

    标签: javascript jquery html css twitter-bootstrap


    【解决方案1】:

    您的问题仅在您调整浏览器大小时出现。如果您在

    【讨论】:

    • 你确定吗?打开小于 768px 的页面而不刷新并尝试向下滚动页面,如果你会看到固定菜单已经出现,是的,你是对的,但对我来说什么也没发生 :)
    • 我刚刚又检查了一遍。如果您直接在
    • 没有在我的桌面和移动设备上发生任何事情,我说的是橙色的固定栏?
    • 在移动刷新页面上告诉我你会看到这个固定栏吗?
    • 当我在 iPhone 和桌面上直接在
    猜你喜欢
    • 1970-01-01
    • 2017-03-17
    • 2016-08-15
    • 2013-08-10
    • 2014-11-16
    • 1970-01-01
    • 2017-02-27
    • 2012-05-22
    • 1970-01-01
    相关资源
    最近更新 更多