小编Nes*_*sta的帖子

如何在CSS中创建此框？

我已经看过一些教程如何用箭头创建盒子,但是,在我的例子中,这些教程都不适合.

在这个下拉导航中,我正在构建如果打开一个下拉列表,然后单击打开第二个,黑框应保持可见.当您点击第二个下拉列表时黑盒消失,并在下拉列表完全打开后重新出现.

更新

我还注意到下拉列表打开后黑框显示,它应该同时打开.

我希望这是有道理的,谢谢你的帮助!

$(document).ready(function() {
  $(".click").on("click", function(e) {
    var menu = $(this);
    toggleDropDown(menu);
  });

  $(document).on('mouseup',function(e) {
    var container = $("nav .top-bar-section ul");


    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
        $(".main-container").removeClass("black-bg");
        if ($('a.active').hasClass('active')) {
          $('a.active').removeClass('active');
        }
      });
    }
  });

});


function toggleDropDown(menu) {
  var isActive = $('a.active').length;
  $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
    $(".main-container").removeClass("black-bg");
    if (menu.hasClass('active')) {
      menu.removeClass('active');
    } else {
      $('a.active').removeClass('active'); …

有没有办法将背景视频放在具有视差效果的div容器中？我正在寻找的是与此模板类似的东西:

点击这里查看示例

我已经尝试了一些我在互联网上找到的流行插件,例如:

BigVideo.js

YouTube播放器

jquery.videoBG

但他们都没有做我正在寻找的东西,也许他们这样做,但我只是无法弄清楚:(

谢谢你们!!

我的页面上有一个粘性侧边栏，使用以下脚本：

$(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

问题是当它到达 Middle Block Div 时它应该停止滚动。目前它不会停止滚动，而是将所有其余内容向下推。有没有办法来解决这个问题？

- 演示 -

谢谢你。

我运行了以下代码,如果您使用移动设备,我需要停止它

jQuery(document).ready(function($){
    var inHeight = $("#wrapper").innerHeight();
    $("#wrapper .col").each(function(){
        $(this).height(inHeight+"px");
        $(this).find('.content').height((inHeight-60)+"px");
    });
});

我可以使用像if($(window).width()<600){ /* do something */ }If这样的东西吗？我应该在弯曲的括号之间写什么？

谢谢!

我的网站上有一个标签界面,其中包含最后一个标签上的图片和YouTube视频.一切正常,但每次切换标签时视频都不会停止播放.有没有办法来解决这个问题？提前致谢.

这就是我得到的:

点击这里

只是一个简单的问题:

如何在CSS中创建这个垂直形状？

这将是div的左边界.

非常感谢!

更新 主要问题是线的底部.

我只是不能让gulp-autoprefixer工作.我用过渡测试它但是当我保存我的scss文件时,前缀不会显示在我的css文件中.其他一切似乎都很好.

这是我的gulp文件:

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./"
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('images', function(){
  gulp.src('build/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('images/'));
});

gulp.task('styles', function(){
  gulp.src(['scss/**/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.reload({stream:true}))
});


gulp.task('default', ['browser-sync'], function(){
  gulp.watch("scss/**/*.scss", ['styles']); …

我发现了这个很棒的教程http://tympanus.net/codrops/2011/07/12/animated-text-and-icon-menu/

我遇到了困难:

例如,我希望背景为黑色,鼠标悬停时文本为白色,背景为白色,鼠标输出为黑色.我怎样才能做到这一点？

因为每当我尝试在鼠标悬停时更改背景颜色时,文本会在鼠标输出时获得背景相同的颜色.

感谢大家 :)

是否有可能使以下CSS样式更像SCSS,并避免重复b:after为每个标题标记？

h1 b:after {
    height: 0.7rem;
    bottom: 1.0rem;
}

h2 b:after {
    height: 0.6rem;
    bottom: 0.6rem;
}

h3 b:after,
h4 b:after {
    height: 0.3rem;
    bottom: 0;
}

谢谢!