Question

我正在使用jquery代码（如下所示），但是当我使用此代码时，网站中有一些表单不再有效我尝试使用jQuery.noConflict();和$.noConflict();但是两者都不起作用。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $(document).ready(function(){
   var topPart = $('#wrapper-29');
   var origOffset = topPart.offset().top;
  $(window).scroll(function () {
      if ($(window).scrollTop() > origOffset) {
             $('#wrapper-29').addClass('sticky');
             $('#block-30').hide();
          } else {
             $('#wrapper-29').removeClass('sticky');
             $('#block-30').show();
         }    
     });
  });
</script>

那么请你帮我解决这个问题。现在我已经删除了代码，因为它正在产生问题。感谢。

Answer 1

我不知道这是否适用于您的情况，但为了避免多个版本的jQuery之间的冲突，这就是我要做的。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
(function($){

      $(document).ready(function(){
       var topPart = $('#wrapper-29');
       var origOffset = topPart.offset().top;
      $(window).scroll(function () {
          if ($(window).scrollTop() > origOffset) {
                 $('#wrapper-29').addClass('sticky');
                 $('#block-30').hide();
              } else {
                 $('#wrapper-29').removeClass('sticky');
                 $('#block-30').show();
             }    
         });
      });

}(jQuery.noConflict(true)));

// jQuery has been removed and is undefined at this point
// so no chance of conflicting with other version of jQuery

</script>

Answer 2

有几个问题 - 一个是使用jQuery.noConflict()，然后引用$ jQuery。您可以将$的引用替换为jQuery，或者像Felix Kling所提到的那样，引用jQuery传递的参数。

除非您需要jQuery.noConflict()的特定原因，否则我建议您从jQuery文件中删除该调用。

这是您更新的代码的样子：

<script>
    jQuery(document).ready(function($){
        var topPart = $('#wrapper-29');
        var origOffset = topPart.offset().top;
        $(window).scroll(function () {
            if ($(window).scrollTop() > origOffset) {
                $('#wrapper-29').addClass('sticky');
                $('#block-30').hide();
            } else {
                $('#wrapper-29').removeClass('sticky');
                $('#block-30').show();
            }    
        });
    });
</script>

现在，正如你所提到的，当这个脚本工作时，它会打破其他带有表单的页面（例如：http://propertymanagementoh.com/pma/） - 当我查看它时，我注意到sticky抛出了一个JS错误脚本。

我的猜测是你正在使用生成ID的CMS（看起来像WordPress） - 所以$('#wrapper-29')可能存在于一个页面上，但不存在于另一个页面上。如果我们重新访问上面的代码并进行以下更改：

<script>
    jQuery(document).ready(function($){
        var $topPart = $('.wrapper-first');
        var $block = $('#block-30');
        var origOffset = topPart.offset().top;
        $(window).scroll(function () {
            if ($(window).scrollTop() > origOffset) {
                $topPart.addClass('sticky');
                if ($block.length > 1) {
                    $block.hide();
                }
            } else {
                $topPart.removeClass('sticky');
                if ($block.length > 1) {
                    $block.show();
                }
            }    
        });
    });
</script>

这应该适用于两个页面（我实际上通过使用Charles Proxy并注入该脚本来验证它是否正常工作）。我做的主要改变是：

1）使用.wrapper-first类作为选择器，因为它们在页面之间是通用的。

2）将变量名更新为$ topPart，这是一个常见的命名约定，上面写着“嘿！我是一个JQUERY OBJECT！”

3）引用$('#block-30')作为$变量，但由于它在两个页面之间不常见，我们检查对象的length属性，看看是否需要调用{{1} }或show - 这不是必需的（因为jQuery会默默地失败...）我建议使用一个独特的类（特别是如果它将在其他页面上）。

希望这有帮助！

Answer 3

如果您希望标题部分已修复，则可以采用更简单，更优雅的方式：

$("header").css('position', 'fixed')

无论浏览器的窗口位置如何，标题的位置都将保持不变如果jQuery不起作用，只需编辑css文件，如下所示：

.header
{
position:fixed;
}

Answer 4

更改滚动时使用滚动侦听器的标题，如下所示：

 var b = $( "body" );
 b.scroll(function(){ 

  if ((b.scrollTop())>0){ // perform what you want to do 
  }

 });

jQuery代码与其他人发生冲突

4 个答案: