小编Hen*_*Eng的帖子

我试着改写我的问题,并将完成我所做的所有步骤,特别是在我失败的地方.我对JS没有深入的了解,但是他不会通过实践和社区的帮助来学习.

我偶然发现了这个答案并意识到了这个好处.由于我不想使用jQuery,我开始在JS中重写它.

1. 第一步是编写一个基本的简单函数来打开"click"菜单,然后使用blur()在焦点元素外面的一个点击上关闭它.方法.

从@zzzzBov引用jQuery代码:

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on('focusout', function () {
  $(this).removeClass('active');
});

我的JS代码:

var navToggle = document.getElementsByClassName('js-site-nav-btn--toggle')[0];
var navMenu = document.getElementsByClassName('js-site-nav')[0];

navToggle.addEventListener('click', function() {
  this.focus();
  navMenu.classList.toggle('js-site-nav--open');
});

navMenu.addEventListener('blur', function() {
  this.classList.remove('js-site-nav--open');
}, true);

打开菜单有效,问题是如果在之前单击一次聚焦元素(菜单),它将仅在菜单外部的"单击"时关闭:

var navToggle = document.getElementsByClassName('js-site-nav-btn--toggle')[0];
var navMenu = document.getElementsByClassName('js-site-nav')[0];

navToggle.addEventListener('click', function() {
  this.focus();
  navMenu.classList.toggle('js-site-nav--open');
});

navMenu.addEventListener('blur', function() {
  this.classList.remove('js-site-nav--open');
}, true);

.c-site-nav {
  color: black;
  list-style-type: none;
  padding-top: 20px;
  position: fixed;
  overflow: hidden;
  top: 0;
  right: -200px;
  width: 200px; …

嘿,我之前已经问了一个类似的问题并且能够实现它,那就是我必须使用png图像,缺点是它的方式太大了.

经过一些研究,我发现了一种使用svg容器和图像的alpha和beta通道的方法.

然而,我遇到的主要困难是使对象适合工作,因此图像将始终覆盖其Flexbox容器的整个50%......甚至可能吗？我错过了什么..非常感谢.

https://codepen.io/HendrikEng/pen/RVzYoR?editors=0100

.c-hero {
   align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: grey;
  height: 30px * 15;
  text-align: center;

  &__image {
    display: flex;
    margin-bottom: -60px;
    margin-top: 60px + 19px;
    max-height: 682px;
    min-height: calc(100% + 140px);
    object-fit: cover;
    object-position: top;
    width: 50%;
  }

  &__item {
    align-self: center;
    width: 50%;
    }
}

<section>
  <div class="c-hero">
    <svg class="c-hero__image" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <mask id="transparentmask">
                <image width="100%" height="100%" xlink:href="http://i.imgur.com/n080w42.png"></image>
            </mask>
        </defs>
        <image mask="url(#transparentmask)" width="100%" height="100%"  xlink:href="http://i.imgur.com/LTgnz9E.jpg"></image>
    </svg>
    <div class="c-hero__item">
      <p>Lorem Ipsum</p> …

嘿，我正在尝试根据滚动位置添加一个类。它在 Jquery 中工作，但我想转向香草，它不起作用。我错过了什么？

如果用户滚动到位置 30px 它应该添加类 .c-logo--scrolled

控制台错误：

未捕获的类型错误：无法在 app.min.js:29 处读取 add_class_on_scroll (app.min.js:17) 处未定义的属性“添加”

var scrollPosition = window.scrollY;
var logoContainer = document.getElementsByClassName('js-logo');

window.addEventListener('scroll', function() {

    scrollPosition = window.scrollY;

    if (scrollPosition >= 30) {
        logoContainer.classList.add('c-logo--scrolled');
    } else {
        logoContainer.classList.remove('c-logo--scrolled');
    }

});

我在webpack中导入一个脚本,一切正常,但是eslint正在抛出错误'modal is assigned a value but never used'.是否必须将const声明为全局或导出模块以修复错误？

modules.vanillaModal.js:

import VanillaModal from 'vanilla-modal';

// Create instance
const modal = new VanillaModal({
  modal: '.c-modal',
  modalInner: '.js-modal__inner',
  modalContent: '.js-modal__content',
  open: '[rel="js-modal:open"]',
  close: '[rel="js-modal:close"]',
  class: 'js-modal--visible',
  loadClass: 'js-modal--loaded',
});

和我的webpack条目index.js:

require('./modules.vanillaModal.js');