Денис Инешин

Нет, потребуется минимум JS чтобы добавить дополнительный CSS-класс с другим таймингом.

Upd: был не прав, в некоторых случаях можно: https://jsfiddle.net/IonDen/hphzyy6u/

Чуть по сложнее нужно: https://jsfiddle.net/IonDen/s33v2roh/

var show = false;
var $nav = $("nav");

function showFixed() {
    if (show) {
        return;
    }

    show = true;

    $nav.hide().addClass("nav-fixed").slideDown();
}

function hideFixed() {
    if (!show) {
        return;
    }

    show = false;

    $nav.slideUp(function() {
        $nav.removeClass("nav-fixed").slideDown();
    });
}

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 350) {
        showFixed();
    } else {
        hideFixed();
    }
});

+1 за foundation.

Кроме того, имейте в виду, что письма вообще не нужно делать вручную, это слишком муторно. И да, большинство email-клиентов понимают только инлайн-стили.

По этому, письма нужно собирать каким либо сборщиком, например Grunt/Gulp, это позволит весь CSS писать в одном месте, а дальше уже раскидать его по письму через переменные.

Кроме того, обратите внимание на этот мощнейший инструмент для тестирования писем: https://litmus.com/email-testing

Вот например

Примерно так:
https://jsfiddle.net/dte9m42q/

CSS нельзя изолировать, по этому лучшее решение - namespace. Это добавит уникальности стилям и не придется писать не нужный important везде.

.my_moudule_namespace--class_name {
    ...
}

Учтите так же тот случай, что вам, на всякий случай, придется прописать некоторые дефолтные значения заново. Так как сайт может их изменить. Например размер шрифтов, цвета ссылок, отступы по умолчанию и т.п.

transform: rotate
С его помощью вы сможете легко повернуть свой квадратик на 45 градусов вместе с областью наведения.

Например вот так можно вынести ссылку отдельным слоем и повернуть ее: https://jsfiddle.net/IonDen/nsem2y6s/