我试图在我的页面上创建一个"粘性"导航,position:fixed;一旦用户滚动到元素,div就会生成.功能按预期工作,但添加粘性类后,应该粘贴到顶部的两列的宽度会发生变化.我尝试添加width:100%;粘性元素的CSS,但随后元素扩展到容器之外.

如何确保列宽保持在position:fixed;添加时应该保持的位置？

HMTL:

<div class="container">
    <div class="padding"></div>
    <div class="anchor"></div>
    <div class="row sticky">
        <div class="col-sm-6">
            Testing
        </div>
        <div class="col-sm-6">
            Testing
        </div>
    </div>
    <div class="padding2"></div>
</div>

CSS:

.padding {
    height:250px;
}
.padding2 {
    height:1000px;
}
.sticky {
    background:#000;
    height:50px;
    line-height:50px;
    color:#fff;
    font-weight:bold;
}
    .sticky.stick {
        position:fixed;
        top:0;
        z-index:10000;
    }

JS:

function stickyDiv() {
    var top = $(window).scrollTop();
    var divTop = $('.anchor').offset().top;
    if (top > divTop) {
        $('.sticky').addClass('stick');
    } else {
        $('.sticky').removeClass('stick');
    }
}

$(window).scroll(function(){ 
    stickyDiv();
}); …

我正在为我的网站创建导航菜单,我想要做的是让背景是2个矩形SVG的组合,每个SVG略微旋转离轴并重叠.边缘将延伸超出屏幕的边缘,从而无法看到它们.SVG应在所有断点处保持相同的高度(120px),并且导航应在容器内垂直居中(即使由于旋转它将显示在偏离中心).当我调整浏览器窗口大小时,我当前的尝试使SVG高度缩小,另外我在对齐时遇到了一些问题.有没有更好的方法来实现这一目标？

.hero-bg {
  height:20vh;
  min-height:200px;
  max-height:350px;
  width:100%;
  background:url('http://placehold.it/1920x1080');
  background-size:cover;
}
.navigation {
	position:relative;
  height:120px;
  overflow:hidden;
}
.nav-bg-1 {
  fill:red;
}
.nav-bg-2 {
  fill:black;
}
.navigation svg {
	position:absolute;
	top:-10px;
	width:110%;
	left:-5%;
}
.navigation ul {
  list-style-type:none;
  padding:0;
  margin:0;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
  .navigation ul > li {
    display:inline-block;
  }
    .navigation ul > li > a{
      color:#fff;
      text-transform:uppercase;
      text-decoration:none;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<section id="hero">
  <div class="hero-bg"></div>
  <div class="navigation">
      <svg viewBox="0 0 2027.79 155.34">
          <rect class="nav-bg-1" x="953.89" y="-935.33" width="120" height="2026" transform="translate(918.54 …

我正在研究一个纯CSS汉堡菜单图标,到目前为止它工作得很好,除了线之间的间隙不可点击.如何修改此代码,以便整个按钮可以单击而不仅仅是线条？

<a href="#" title="Open Menu" class="menu"></a>

.menu {
    width:30px;
    height:5px;
    background-color:#000;
    position:relative;
    display:inline-block;
}
    .menu:after, .menu:before {
        content: '';
        width: 100%;
        height:5px;
        background-color:#000;
        position:absolute;
    }
    .menu:after {
        top:10px;
        left:0;
    }
    .menu:before {
        top:20px;
        left:0;
    }

这是一个JSFiddle.

谢谢!

我有一个视频，我想根据视频的当前时间在几个不同的点暂停它。将有 3 次停止，一次在 5 秒时，一次在 10 秒时，一次在 15 秒时。每次停止时，都会出现一个按钮以继续播放视频。我不确定如何进行这项工作，因为currentTime从来没有准确地击中这些点，所以目前我必须使用>=时间停止，这意味着 5 秒停止点将持续触发。

var video = $('#video').get(0);

video.addEventListener('timeupdate', function() {
    if(this.currentTime >= 5) {
        console.log('5 seconds');
        this.pause();
        $('button').css('display','block');
    }
    
    if(this.currentTime >= 10) {
      console.log('10 seconds');
      this.pause();
      $('button').text('Part 3');
      $('button').css('display','block');
    }
    
    if(this.currentTime >= 15) {
      console.log('15 seconds');
      this.pause();
      $('button').text('Part 4');
      $('button').css('display','block');
    }
});

$('button').click(function() {
  video.play();
  $('button').css('display','none');
});

button {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>

<button>Part 2</button>

我正在使用Google Maps API显示我所在区域的交通状况,我想知道是否可以隐藏它的实际地图部分,以便只有交通图层可见(绿色/红色/黄色交通车道和道路名称)将是可见的,但背景将是透明的或纯色而不是显示地图).

这是我到目前为止所拥有的:

$(function() {
    var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 12,
        center: new google.maps.LatLng(34.0204989,-118.4117325),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDoubleClickZoom: true,
        draggable: false,
        scrollwheel: false,
        panControl: false,
        disableDefaultUI: true
    });

    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
});

这是我想要完成的一个粗略的例子:

的jsfiddle

我正在尝试使用Flexbox创建布局。在这些布局之一中，我想要3个等宽的列。为此，我使用calc设置列宽。这在现代浏览器中可以正常工作，但是在IE中当然不希望这样。这是我的代码：

.container {
  width:50vw;
  margin:0 auto;
  display:flex;
}
  .container > div {
    flex:1 0 calc(100% / 3);
  }

<div class="container">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

正如我所提到的，这在现代浏览器中可以正常工作，但是在IE中，除非我使用特定百分比代替，否则列之间会彼此折叠calc。

我正在尝试使用jQuery Cookie设置cookie,以便为新访问者显示警报,当您单击"关闭"按钮时,它将设置cookie并阻止警报div显示.我还想让cookie在24小时后过期.

我已经玩了一些代码并让它工作,但是,我现在的方式,默认显示警报div,只有在你点击关闭时才隐藏.这很好,但是当cookie存在时,警报会在隐藏之前显示一瞬间.

我如何修改以下代码,以便我可以默认隐藏div,如果cookie不存在则会显示,但如果他们点击关闭按钮,它将生成一个cookie并隐藏警报24小时？

if ($.cookie('alert')) $('.alert-box').hide();
else {
    $(".close").click(function() {
        $( ".alert-box" ).slideUp( "slow", function() { });
        $.cookie('alert', true);
    });
}

我正在使用一个包含Animate.css和jQuery Viewport Checker的教程来将元素设置到我的页面中(http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and -jquery /).

我想知道如何修改这些动画,以便每个动画连续发生而不是一次完成.IE我希望第一个元素动画,然后当一个元素即将完成下一个元素开始动画,等等.

以下是我到目前为止所有元素的动画:

<div class="container">
    <div class="post">1</div>
    <div class="post2">2</div>
    <div class="post">3</div>
    <div class="post2">4</div>
    <div class="post">5</div>
    <div class="post2">6</div>
    <div class="post">7</div>
</div>

<script>
    $(document).ready(function(){
        $('.post').addClass("hidden").viewportChecker({
            classToAdd: 'visible animated fadeInUp',
            offset: 100
        });
        $('.post2').addClass("hidden").viewportChecker({
            classToAdd: 'visible animated fadeInDown',
            offset: 100
        });
    });
</script>

的jsfiddle

任何帮助非常感谢!!

我有一个产品的JSON对象.在对象中,我想检查是否有任何产品的featured密钥设置为true.如果密钥存在于对象中的任何位置,我想h3在结果上面添加一次.

假设我有一个包含4个产品的对象,其中一个产品的featured密钥设置为true,我将如何调整此代码,以便h3只添加一次(目前它被添加了4次)？

var searchResult = '';
$.each(products, function (id, product) {
    if (products[id].featured) { searchResult += '<h3>Featured</h3>'; }
});

我有一个这样的变量：

GA1.2.721553813.2630350365

我想GA1.2.从这个字符串中删除。我正在使用该split方法来拆分这个.问题，因为变量并不总是具有第三个，.所以我想将我的 JavaScript分解为只返回第二个之后的任何内容.，我该怎么做？

GA1.2.721553813.2630350365