我有两个 jQuery 元素，它们在本地测试时运行良好，但一旦移动到服务器，就会开始遇到 2 个特定于浏览器的问题。如果有帮助，我可以将其分成两个单独的问题。
第一个问题是 jScrollPane 插件，它用于允许在 Firefox 中的几个“overflow:scroll”div 上设置滚动条的样式。令人恼火的是，该解决方案对 IE 和 Chrome 绝对有效，但对 Firefox 无效。同样，在本地测试时，它可以正常工作(包括在 Firefox 中)，但是当移动到服务器时，功能就会中断。 jScrollPane“插件”正在启动——它为每个 Firebug 添加了 jspContainer、jspScrollable 和 jspPane，但只是没有在 Firefox 中添加滚动功能。在屏幕上，它显示为 overflow:hidden div。
第二个问题是固定位置导航栏类根据击中视口(viewport)顶部的部分元素更改为 .current。我的解决方案在 Firefox 和 Chrome 中运行良好，但在 IE 中无法切换。
编辑 - 此脚本无法在本地或在 IE 的服务器上运行。它在 Chrome/FF 中完美运行
可以在 www.4SDesignStudio.com/new-projects/bwh/index.html 找到未完成的工作模型
我在本地托管 jQuery 1.11 版。
滚动条问题 HTML:
<div class="scroll-pane">
<div id="main-tasting-menu">
<div class="centered">
<h2 style="margin:0; padding:0; ">Big Reds and Tasty Whites Menu</h2>
<p style="margin:0; padding:0;">For our sweeter and champagne-esque releases, please click the "Bubbles & Dessert Menu" to the right</p>
<br/>
</div>
<a href="#"><img src="images/labels/bwh-2010-viognier.jpg" alt="Big White House 2012 Viognier"/></a>
<h3><a href="#">2012 Viognier | Big White House</a></h3>
<h4><a href="#">Ripken Vineyard, Lodi - Single Vineyard Viognier</a></h4>
<p>Our 2012 Viognier benefitted from a mild ripening season rewarding us with aromas of ripe melon and orange zest. Cold fermentation and extended barrel aging then yield
beeswax and honey in the nose. The extended barrel aging also gives us an extra-creamy mouthfeel to balance the crisp finish.</p>
<a href="#"><img src="images/labels/bwh-2009-lapsus.jpg" alt="XXXXX"/></a>
<h3><a href="#">2012 Lapsus | Big White House</a></h3>
<h4><a href="#">California Blend - 50% Viognier, 38% Roussanne, 12% Marsanne</a></h4>
<p>Our 2012 Viognier benefitted from a mild ripening season rewarding us with aromas of ripe melon and orange zest. Cold fermentation and extended barrel aging then yield
beeswax and honey in the nose. The extended barrel aging also gives us an extra-creamy mouthfeel to balance the crisp finish.</p>
<a href="#"><img src="images/labels/bwh-2012-pinot-noir.jpg" alt="XXXXX"/></a>
<h3><a href="#">2012 Pinot Noir | Big White House</a></h3>
<h4><a href="#">Ripken Vineyard, Lodi - Single Vineyard Pinot Noir</a></h4>
<p>We loved this Pinot as a baby, and love it still, but as a teenager, it's ready to bound out into the world - Light, sparkly, fresh and not looking back. We like its forward
leaning confidence and light-hearted humor. As its parents, we are concerned about the short skirt and skimpy top. It is the youngest child that we've ever allowed to leave home.
You can't keep them down on the farm after the've seen Paris.</p>
<a href="#"><img src="images/labels/bwh-2010-east-west-syrah.jpg" alt="XXXXX"/></a>
<h3><a href="#">2012 East-West Syrah | Big White House</a></h3>
<h4><a href="#">Livermore Valley Blend - 100% Syrah, 2 Vineyards</a></h4>
<p>This 2010 Syrah we call East-West Syrah because it marries Syrah from a hilly, Eastern Livermore Valley vineyard with a rocky stream-bed of a vineyard from the west side. The
mouth has a nice big syrah mouth feel, moderated by a little bit of butteriness in the mid-palate and finally, finishing with a taste of juicy blackberry.</p>
<a href="#"><img src="images/labels/bwh-2011-alfies-amalgamation.jpg" alt="XXXXX"/></a>
<h3><a href="#"><u>*Barrel Sample:</u> 2011 Alfie's Amalgamation | Big White House</a></h3>
<h4><a href="#">Livermore Valley Blend - 40% Petite Sirah, 40% Zinfandel, 20% Cab</a></h4>
<p>Great mouth-feel, blackberry, cherry and alspice in the nose is followed by big mouth-feel and a juicy finish in the mouth.<br><br></p>
<a href="#"><img src="images/labels/bwh-2009-zinfandel.jpg" alt="XXXXX"/></a>
<h3><a href="#"><u>*Barrel Sample:</u> 2012 Zinfandel | Big White House</a></h3>
<h4><a href="#">Sblendorio Vineyard, Livermore Valley - Single Vineyard Zinfandel</a></h4>
<p>Lighter and brighter than the 2011, the 2012 still maintains the style of a food-friendly Zin. Cranberry and strawberry with hints of white pepper in the nose is followed by medium body
and long finish in the mouth</p>
<a href="#"><img src="images/labels/bwh-2011-chateau-marion.jpg" alt="XXXXX"/></a>
<h3><a href="#">2011 Chateau Marion Bordeaux | Big White House</a></h3>
<h4><a href="#">Livermore Valley Blend - 50% Cabernet Sauvignon, 50% Merlot</a></h4>
<p>Bordeaux blend of eastern Livermore Cabernet and Merlot. In our 2011 Chateau Marion, find mid-palate structure and spice from the Merlot and cherry, with a long juicy finish from the Cab.</p>
<br/>
<a href="#"><img src="images/labels/je-2011-amoureux.jpg" alt="XXXXX"/></a>
<h3><a href="#">2011 La Famille Des Amoureux | John Evan Cellars</a></h3>
<h4><a href="#">Livermore Valley Blend - 80% Cab, 20% Petite Sirah</a></h4>
<p>The fourth in the Lovers Series, this Les Am continues the tradition of matching a masculine cab with it's feminine couterpart to achieve balance and structure. The Lovers Series tracks John Evan's
and his wife Christina's relationship. The newest milestone is a baby boy, born April 2nd. A little bit of Petitie Sirah represents the new addition. Like the little man himself, Petite Sirah
gives a big impact in a little package.</p>
<br/>
<br/>
</div>
<div id="dessert-tasting-menu">
<div class="centered">
<h2 style="margin:0; padding:0; ">Dessert and Bubbles Menu</h2>
<p style="margin:0; padding:0;">For our red and white releases, please click the "Big Reds & Tasty Whites Menu" to the right</p>
<br/>
</div>
<a href="#"><img src="images/labels/bwh-2007-liquid-amber.jpg" alt="Big White House 2012 Viognier"/></a>
<h3><a href="#">Grand Cuvee | Big White House</a></h3>
<h4>Sparkling Wine</h4>
<p>This delightfully dry, sparkling wine was bottled specifically for our Big White House Sparkling Cellars Label. We like the tiny bubbles, creamy mouth feel and crisp, dry
finish. Equivalent in dryness to a French "Brut", this is a terrific sparkler for celebrating any occasion. Try this in a "kit" mixed with the Sherry (two parts Cuvee, one part
Late Harvest Viognier).</p>
<p style="color:orange">NEED CORRECT LABEL IMAGES</p><!-- Need correct labels -->
<a href="#"><img src="images/labels/bwh-2007-liquid-amber.jpg" alt="XXXXX"/></a>
<h3><a href="#">Peche Mignon | Big White House</a></h3>
<h4><a href="#">Peach Sparkling Wine</a></h4>
<p>You've all loved our dry sparkling wine and now John Marion made a special release for his grandmother Eva. Our sparkling wine is kissed with peach and is sure to become a
favorite of everyone. Still plenty of tiny bubbles with a creamy mouth feel and crisp dry finish. Try this in a "kit" mix with Ma Cherie.</p>
<p style="color:orange">NEED CORRECT LABEL IMAGES</p><!-- Need correct labels -->
<a href="#"><img src="images/labels/bwh-2007-liquid-amber.jpg" alt="XXXXX"/></a>
<h3><a href="#">Ma Cherie | Big White House</a></h3>
<h4><a href="#">Sherry-Style, Late Harvest Viognier</a></h4>
<p>Sherry is often described as the most under-rated of traditional wines. Our aging regime follows the traditional approach, using not-quite-full barrels. The flor controls the
oxidation and allows for the formation of a variety of aromas including Turbinado sugar, dried apricot, caramel, orange blossom and toasted almonds.</p>
<p style="color:orange">NEED CORRECT LABEL IMAGES</p><!-- Need correct labels -->
</div>
</div>
</div>
CSS:
.tasting-menu {
margin-top: 0;
padding-top:1em;
padding-left:.25em;
height: 24.5em;
line-height:1em;
background:rgba(00,00,00,.5);
border-radius:8px;
overflow: hidden;
}
.tasting-menu h3{
color:rgba(224, 145, 50, 1);
margin-bottom:0;
font-size:1.1em;
}
.tasting-menu h4{
font-size:.9em;
font-weight:400;
}
.tasting-menu p {
font-size:.75em;
font-weight:300;
margin:auto 1em .5em 16%;
}
.tasting-menu img {
width:12.5%;
height:auto;
float:left;
margin-right:1.5em;
}
/* Creates toggled hidden and visible menus using Javascript for Main Menu and Desert/Bubbles Menu */
.button-switches input {
width:85%;
border-radius:3px;
background: rgba(224, 145, 50, 1);
}
.button-switches input:hover {
cursor:pointer;
background: rgba(00,00,00, .5)
}
#main-tasting-menu {
display:block;
}
#dessert-tasting-menu {
display:none;
}
/* jQuery Scrollbar fix for Firefox browser */
.scroll-pane {
position:relative;
height:24.5em;
overflow: scroll;
padding-bottom:1.5em
}
JS:
<script>
$(document).ready(function(){
// Cached variables to avoid multiple jQuery calls
var $mainLinks = $('.main-links');
var $headerLogo = $('.header-logo');
var $mainTastingMenu = $('#main-tasting-menu');
var $dessertTastingMenu = $('#dessert-tasting-menu');
var $menuSwitch_1 = $('#menu-switch1');
var $menuSwitch_2 = $('#menu-switch2');
// Plugins
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
// Event handlers
$menuSwitch_1.on('click', function(event) {
$mainTastingMenu.toggle('show');
$dessertTastingMenu.toggle('hide');
});
$menuSwitch_2.on('click', function(event) {
$mainTastingMenu.toggle('hide');
$dessertTastingMenu.toggle('show');
});
$(window).on('scroll', function(event) {
if ($(this).scrollTop() > 200) {
$mainLinks.fadeIn();
$headerLogo.fadeIn();
} else {
$mainLinks.hide();
$headerLogo.hide();
}
var top = $(this).scrollTop(),
idx = $('section.marker').sort(function (a, b) {
return top - $(b).offset().top;
}).first().index('section.marker'),
el = $('.main-links li a').eq(idx);
if (!el.hasClass('current')) {
$('.main-links li a').removeClass('current');
el.addClass('current');
}
});
});</script>
最佳答案
Bootstrap scroll spy 将解决导航栏问题，其中链接是“#link”以指向“id="link"”。
当 id 对象移动到顶部时，菜单事件类将更改以匹配。
查看此示例:http://jsfiddle.net/6q3LpjL7/
<!-- add class to body tag:-->
<body class="scroll-area" data-spy="scroll" data-target="#myNavbar" data-offset="60">
<!-- Example of href in navbar -->
<li><a href="#section-2">Section 2</a></li>
<!-- ID attribute to match href in navbar --L
<h3 id="section-2">Section 2</h3>
<!-- jQuery to scroll page using scrollTop and scrollSpy -->
$(function(){
$('a[href*=#]:not([href=#])').click(function(){
var pathName = location.pathname;
var thisPathName = this.pathname;
var locHost = location.hostname;
var thisHost = this.hostname;
if( pathName == thisPathName && locHost == thisHost ){
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if(target.length){
$('html,body').animate( { scrollTop: $( target ).offset().top - 65 }, 1250 );
}
}
});
});
关于jQuery 脚本在本地工作 - 传输到服务器时中断？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25853757/