小编egr*_*103的帖子

一堆代码无法正常工作,我正在尝试确定问题所在,但未console.log()在Chrome Dev工具中记录任何结果,我是否正确执行？

$(window).scroll(function() {
       $('section').each(function(){
            var id='#'+$(this).attr('id'),
                off=$(id).offset().top,
                hei=$(id).height(),
                winscroll=$(window).scrollTop(),
                dif=hei+off-($(window).height());

            if (winscroll >= off && winscroll<=dif) {
                console.log('first broken');
                $(id+' .sticky').removeClass('abs').addClass('fix');
            } else if (winscroll > dif){
                console.log('second broken');
                $(id+' .sticky').removeClass('fix').addClass('abs');
            } else {
                console.log('third broken');
                $(id+' .sticky').removeClass('fix abs');
            }   });
        });

编辑完整代码添加

$(document).ready(function() {

    // If a browser supports 3D transforms use the fancy menu if it doesn't, use standard accordion menu instead
    if($('html').hasClass('csstransforms3d')){

        $( "#mp-menu" ).removeClass( "snap-drawers" ).addClass( "mp-menu" );

        $('nav ul li ul').css('border-bottom','1px solid …

我有一个div调用.testimonial-inner并使用:after伪元素我有一个箭头位于它下面指向下方.我遇到的问题是为它添加一个盒子阴影,所以它们看起来都像一个自然元素.

没有box-shadow三角形:

body {
  background: #eee
}
.testimonial-inner {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 30px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
  top: 100%;
  left: 48px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: …

使用普通的旧CSS,为什么"max-width"不能用于以下方面:

button {
  text-align: center;
  max-width: 540px;
  height: auto;
  display: block;
  padding: 10px 0;
  margin: 0 auto;
  border: none;
}

这个元素的包装:

#wrapper {
  max-width: 1024px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  padding: 0 50px;
  text-align: center;
}

编辑

代码添加到jsfiddle:http://jsfiddle.net/BXdrG/

我的机会很渺茫但我已经通过谷歌尝试了几个解决方案,但似乎没有解决'未捕获的TypeError:无法调用方法'应用'未定义',匿名函数:

如果它本身没有其他JS,但是当它与其他脚本组合在同一页面上时我会收到错误.

它引用的代码行如下,第32行是罪魁祸首.第32行是这一行 - if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }:

var $event = $.event, resizeTimeout;

    $event.special.smartresize  = {
        setup: function() {
            $(this).bind( "resize", $event.special.smartresize.handler );
        },
        teardown: function() {
            $(this).unbind( "resize", $event.special.smartresize.handler );
        },
        handler: function( event, execAsap ) {
            // Save the context
            var context = this,
                args    = arguments;

            // set correct event type
            event.type = "smartresize";

            if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
            resizeTimeout = setTimeout(function() {
                jQuery.event.handle.apply( context, args ); …

我需要一些帮助,试图了解它是如何transform-origin工作的,我已经完成了我的谷歌搜索,但找不到任何可以帮助我的具体用例的东西.这就是我想要实现的目标:

我有一个固定高度的固定页脚,我有两行旋转文本(左栏),我怎样才能完全控制它的位置？目前它从页脚顶部开始,完全在页脚之外,我设置了一个小提示来显示我当前的代码:http://jsfiddle.net/eury7f6f/

任何人都有任何想法如何实现我想要的？

.vertical-text {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

这是jsfiddle:http://jsfiddle.net/NKgG9/

我基本上希望那些粉红色的盒子像正常一样在页面加载时显示,但是一旦用户向下滚动页面,我希望它们淡出并消失.当用户向上滚动到他们的位置或浏览器窗口的顶部时,我希望那些粉红色的盒子再次淡入.我对JS没用,所以对如何做到这一点有一些帮助.

所有帮助赞赏.

我有一个可以正常工作的谷歌地图,但我只需要调整它,以便在点击标记并打开信息窗口时,我希望该标记(和地图)在屏幕上居中.这样信息窗口就是直接焦点.

如果它有帮助,我正在使用Infobox.js来创建infowindows.我尝试过使用Offset

pixelOffset:new google.maps.Size(-97,-20)

但是当打开标记时,这并不会使信息窗或地图居中,而且不准确.

我的代码(实例):

var ib = new InfoBox();

function initialize() { 
var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(52.204872,0.120163),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: styles,
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

    google.maps.event.addListener(map, "click", function() { ib.close() });

setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
    content: "loading..."

});
}

var sites = [
['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600 <br/> <a href="http://www.frontroomcambridge.com/">Website</a></p>'],
['Fitzwilliam …

我有2个全高div.向下滚动页面时,一个div向上滚动,另一个向相反方向滚动.这非常有效.

我试图保持这种效果,但在它下方放置正常的全宽度内容,同时试图保持自然滚动.所以我想保留替代滚动效果,但是当我到达使用此效果的最后一个div的底部时,我想继续正常滚动以查看其下方的正常内容.

这是我的jsFiddle,目前它浮动在我引用的效果上:http://jsfiddle.net/u9apC/116/并且JS粘贴在下面以供参考:

(function ($) {
var top = 0;

$(document).ready(function () {
    var contentHeight = $('.right').height(),
        contents = $('.right > .content').length;

    top = (0 - (contentHeight * (contents - 1)));

    $('.right').css('top', top + 'px');
});

$(window).resize(function () {
    var contentHeight = $('.right').height(),
        contents = $('.right > .content').length;

    top = (0 - (contentHeight * (contents - 1)));

    $('.right').css('top', (top + $(window).scrollTop()) + 'px');
});

$(window).scroll(function () {
    $('.right').css('top', (top + $(window).scrollTop()) + 'px');
});

})(jQuery);

编辑 …

我已经阅读了这个问题和答案:CSS overflow-x:visible; 溢出-y:隐藏; 导致滚动条问题以及一堆其他冲突的用例.我也尝试过将不同的溢出类型应用于不同的父母.似乎没有什么能让我的用例工作.

我的情况

我有一个全高度的固定菜单,其中包含很多链接,所以如果浏览器不够高,无法显示所有内容,我想让用户在固定的div中滚动.不是一个大胆的要求.

我如何解决这个问题,这是我正在使用的设置示例:http://jsfiddle.net/mz9abf43/9/

UPDATE

这是我的完整上下文代码的更新小提琴,这正是我希望我的菜单看起来如何,但我只想允许垂直滚动,如果屏幕高度小于菜单的长度.http://jsfiddle.net/mz9abf43/24/

预期产出

每个链接之间的线应该溢出到蓝色菜单的右侧(如下图所示)并且还允许用户在蓝色菜单中滚动.目前我只能做一个或另一个.

我的结构是:

<div id="fixed">
    <nav>
       <ul class="menu">
         <div class="drop">
             <li>Link here</li>
             <li>Link here
                 <ul>
                    <div class="drop">
                        <li>Link here</li>
                        <li>Link here</li>
                    </div>
                 </ul>
             </li>
             <li>Link here</li>
         </div>
       </ul>
    <nav>
</div>

我的CSS是

#fixed {
        width:280px;
        position: fixed;
        top: 0;
        left: 0;
        bottom:0;
        z-index: 1000;
        background: #fff;
}

.menu   {
        padding: 0;
        margin: 0;
        position: fixed;
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;
        width: …

我的网页上有5个视频.只有当您将鼠标悬停在视频上时才会开始播放.我的代码如下:

$(".service:nth-child(1) a").hover(function(){
    $('.service:nth-child(1) a video#bgvid').get(0).play();
},function(){
    $('.service:nth-child(1) a video#bgvid').get(0).pause();
});

我曾经使用过,:nth-child因为如果我将鼠标悬停在视频4上,它会播放视频1,所以我必须具体.这意味着我必须为每个视频重复上述代码,但相应地更改:nth-child数字.我对JS不是特别熟练,但必须有更好,更有效的方法吗？